如何在表单输入字段中为密码分配默认值？

Posted 2023-04-18

【中文标题】如何在表单输入字段中为密码分配默认值？

【英文标题】：how to assign default value in form input field for password?

【发布时间】：2011-10-14 02:43:39

【问题描述】：

我正在尝试在输入字段中设计一个类似于twitter 中的表单我需要为输入字段分配默认值，我确实分配了，但是对于密码，显示的值是密码格式，如何将密码的默认值显示为“密码”。默认值也应该只在我输入一些值时才会改变，它不应该在点击时消失。

<div class="editfield">
<label for="signup_password">Choose a Password <span class="required">*</span>
</label>
<div class="input_field">
<input type="password" minlength="6" value="Password" id="signup_password" 
   name="signup_password" onclick="this.value=''" 
   onblur="if(this.value=='') this.value='Choose a Password';">
<span id="pass1Info" class=""></span></div>
</div>

【问题讨论】：

等等，您根本不希望密码字段被屏蔽？或者您是说您只希望该值与默认值不同时被屏蔽。这似乎不直观且令人困惑

【参考方案1】：

Twitter 正在使用透明的密码框。 默认值并不是真正的默认值，而只是密码框的背景。

.front-page form .holding input 
    -moz-transition: opacity 1s ease 0s;
    background-color: white;
    border: medium none !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset;
    color: #567792;
    opacity: 0.7;

一旦你开始输入，包装器就会得到类 hasome，并且后台说“密码”的 span 的字体大小设置为 0

.logged-out form .hasome .holder 
    font-size: 0 !important;
    opacity: 0;

【讨论】：

把整个脚本和html贴出来就好了

【参考方案2】：

使用keydown事件将类型从文本更改为密码并将值更改为空字符串

    <div><input value="Password"  onkeydown="if(this.type!='password')this.type='password';this.value='';" onblur="if(this.value=='') this.value='Choose a Password';">
</div>

检查这个小提琴 http://jsfiddle.net/rajani5022/PE2qu/