Đặt giá trị mặc định của đầu vào mật khẩu để có thể đọc được

Tôi muốn có một trường mật khẩu có nội dung "Mật khẩu" trước khi người dùng nhập mật khẩu của họ (để họ biết trường là gì)Đặt giá trị mặc định của đầu vào mật khẩu để có thể đọc được

I ' d thay vì chỉ sử dụng Javascript, nhập khẩu jQuery cho điều này một mình có vẻ lãng phí, nhưng tôi không có ý tưởng làm thế nào để. Những hình ảnh giải thích khá rõ ràng:

gì nó trông giống như:

enter image description here

Những gì tôi muốn nó trông giống như:

enter image description here

Đó chỉ là một rất đơn giản trang web và thông tin đăng nhập cơ bản nhất (không có xác thực, v.v.)

Bất kỳ ý tưởng nào?

<input id="username" name="username" class="input_text" type="text" value="Username" /> 
<input id="password" name="password" class="input_text" type="password" value="Password" />

Nguồn

2011-01-25 theorise

Bạn có thể có khả năng hack nó bằng cách thay đổi kiểu của trường động (tức là "văn bản" đầu tiên, thay đổi thành "mật khẩu" khi kích hoạt). Tôi không chắc chắn 100% điều này sẽ làm việc. –

Nhập đầu vào password làm kiểu nhập đơn giản text. Sau đó, với JavaScript (hoặc JQuery) trên sự kiện tiêu điểm, hãy thay đổi nó thành kiểu đầu vào password.

Dưới đây là một chút mẫu chưa được kiểm tra với đồng bằng JavaScript (không jQuery):

<html> 
<head> 
    <script type="text/javascript"> 
     function makeItPassword() 
     { 
     document.getElementById("passcontainer") 
      .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>"; 
     document.getElementById("password").focus(); 
     } 
    </script> 
</head> 
<body> 
    <form> 
     <span id="passcontainer"> 
     <input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" /> 
     </span> 
    </form> 
</body> 
</html>

Nguồn

2011-01-25 18:08:52

+1. Đó là cách tôi sẽ làm điều đó. '$ (" # password "). bind (" focus ", function() {$ (this) .val (" "); $ (this) .attr (" type "," password ");});' –

Lưu ý rằng việc thay đổi 'loại' của các phần tử' input' sẽ không hoạt động đúng trên IE. Xem thêm: http://stackoverflow.com/questions/1544317/ – CMS

@CMS: Điểm tuyệt vời. Không biết điều đó! –

Một giải pháp đơn giản:

<input id="username" name="username" class="input_text" type="text" placeholder="Username" /> 
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Nguồn

2011-01-25 19:29:44 Ms2ger

Nếu bạn đang sử dụng HTML5 thì bạn nên sử dụng placeholder attribute.

<input id="username" name="username" class="input_text" type="text" placeholder="Username" /> 
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />

Nếu bạn đang sử dụng HTML4 bạn có thể tạo một fake password field.

<script type="text/javascript"> 
    function pwdFocus() { 
     $('#fakepassword').hide(); 
     $('#password').show(); 
     $('#password').focus(); 
    } 

    function pwdBlur() { 
     if ($('#password').attr('value') == '') { 
      $('#password').hide(); 
      $('#fakepassword').show(); 
     } 
    } 
</script> 

<input id="username" name="username" class="input_text" type="text" v="Username" /> 
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" /> 
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />

Nguồn

2011-04-26 21:30:46

-2

Tôi có một ý tưởng để đối phó với vấn đề này và bạn sẽ không cần javascript:

<input onclick="value=''; type='password';" name="password" type="text" value="Password" />

Hoặc bạn cũng có thể làm điều đó như thế này:

<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />

Tôi không biết sự khác biệt giữa các khả năng này. Một điều khác bạn có thể thay đổi là viết thay vì onclick=.......onfocus=.....

Tôi cũng không biết sự khác biệt ở đây.

Nhưng tôi hy vọng tôi có thể giúp bạn. PS: Xin lỗi vì tiếng Anh xấu của tôi là tiếng Đức.

Nguồn

2013-03-28 21:01:59 Leon5637

"bạn sẽ không cần Javascript" - _is_ JavaScript này. – MrWhite

Thêm mã sau đây để javascript của bạn:

function makePasswordHidden() { 
    document.getElementById("password").setAttribute("type", "password"); 
}

Thay đổi đầu vào cho các mật khẩu để:

<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">

Điều này không nó nó làm cho các yếu tố đầu vào một 'mật khẩu' và giá trị được cập nhật để ẩn. Nếu bạn muốn cho các value = "Mật khẩu" để hiển thị nếu lĩnh vực này được để trống sau đó thêm các chức năng javascript sau:

function makePasswordShown() { 
    document.getElementById("password").setAttrivute("type", "text"); 
}

Và thêm dòng sau vào đầu vào mật khẩu của bạn:

onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"

Nguồn

2015-06-19 22:35:58

Đặt giá trị mặc định của đầu vào mật khẩu để có thể đọc được

Trả lời

Các vấn đề liên quan