javascript - default value 'password' for input field, show it? - Stack Overflow

admin管理员组

文章数量:1317906

I'm using this js to display default password, when user clicks it automatically clears default value, if user deselects without entering anything default value re-appears.

I used it for all my fields, but obviously for password it is trickier! :)

How would you do it?

<input
    type="password"
    onblur="this.value=!this.value?'Password':this.value;"
    onfocus="this.select()"
    onclick="if (this.value=='Password'){this.value='';}"
    name="pwd"
    id="user_pass"
    class="input"
    value="Password"
    size="20"
    tabindex="20" />

I'm using this js to display default password, when user clicks it automatically clears default value, if user deselects without entering anything default value re-appears.

I used it for all my fields, but obviously for password it is trickier! :)

How would you do it?

<input
    type="password"
    onblur="this.value=!this.value?'Password':this.value;"
    onfocus="this.select()"
    onclick="if (this.value=='Password'){this.value='';}"
    name="pwd"
    id="user_pass"
    class="input"
    value="Password"
    size="20"
    tabindex="20" />

• javascript
• input

Share Improve this question Follow edited May 18, 2012 at 21:59 mellamokb 56.8k1212 gold badges110110 silver badges138138 bronze badges asked May 18, 2012 at 21:58 user796443user796443 2

• 2 You want this default value to be visible but then if they type something else show *****? – James Montagne Commented May 18, 2012 at 21:59
• 1 Demo: jsfiddle/cgP5K – mellamokb Commented May 18, 2012 at 22:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Were you thinking of <input placeholder='Password' type='password'/> ?

This is your solution: http://jsfiddle/cgP5K/1/

<input
  type="text"
  onblur="this.value=!this.value?'Password':this.value;"
  onfocus="this.select()"
  onclick="if (this.value=='Password'){this.value=''; this.type='password'}"
  name="pwd"
  id="user_pass"
  class="input"
  value="Password"
  size="20"
  tabindex="20" />​

Try This out - http://roshanbh..np/examples/text-in-password/

You need to create a plain text input as a placeholder. This code will do that for you without exposing any variables to the global scope:

​<input id="pass-placeholder" type="text"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ value="Password" />
<script type="text/javascript">
(function(){
    var pass_holder_el = document.getElementById('pass-placeholder');
    var pass_el = document.createElement('input');
    pass_el.type = 'password';

    pass_el.onblur = function(){
        if(!this.value)
            this.parentNode.replaceChild(pass_holder_el, this);
    }

    pass_holder_el.onfocus = function(){
        this.parentNode.replaceChild(pass_el, this);
        pass_el.focus();    
    }
})();
</script>​

JSFiddle

Please use the below solution,

<input name="password" class="input"value="Password" size="20"
  tabindex="20"  onclick="if(this.value==defaultValue){this.value=''; this.type='password'} else if(this.value==''){this.value=defaultValue; this.type='text'} " onblur="if(this.value==''){this.value=defaultValue; this.type='text'}"/>

because first solution works well but if u empty the password field, it will not convert to its default value which is a text. So try above solution.

本文标签： javascriptdefault value 39password39 for input fieldshow itStack Overflow