Geek asks and answers

HTML: HTML5 Placeholder attribute in password field - shows plain text?

I create an entry form in which there are two fields -

simplified:

<input type="text">
<input type="password" placeholder="1234567" >

In my tests (FF, Chrome) placeholer shows gray text. How can I get placeholder text in dot passwords? And have placeholder support in IE?

eg. the user sees a fake gray password, not text 1233467.

(i have jquery)

Many thanks,

Harley

EDIT: This seems like the wrong way to use placeholder. However, how can I get IE support? Thanks

+5
source share
3 answers

Try using the password dot code in the placeholder as follows:

placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"

IE , IE , IE/Firefox, javascript

+21

,

, .

span. . , , . , , , :

<span style="position: relative;">
<input id="password" type="password" placeholder="Password" >
<label id="placeholder" style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="password">Password</label>
</span>
<script type="text/javascript">
    $(document).ready(function(){
        $('#password').keypress(function(){
            $('#placeholder').html("");
        });
    });
</script>
+2

, UX, .

HTML5 placeholder value.

<input type="password" value="1234567">

Then, focusreplace with valuean empty string.

var inputs = document.getElementsByTagName('input'),
    i = 0;
for (i = inputs.length; i--;) {
  listenerForI(i);
}

function listenerForI(i) {
  var input = inputs[i],
      type = input.getAttribute('type'),
      val = input.value;
  if (type === 'password') {
    input.addEventListener('focus', function() {
      if (input.value === val) input.value = '';
    });
    input.addEventListener('blur', function() {
      if (input.value === '') input.value = val;
    });
  }
}

I want to reiterate that I DO NOT recommend this approach, but it will do what you are looking for.

EDIT:

Please visit this page which will simulate functionality placeholderif it is not supported by your browser using jQuery: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

+1
source

More articles:


All Articles