JavaScript实现密码框显示提示文字的原理与代码
本文介绍了在JavaScript中实现密码框显示提示文字的技巧。主要方法包括使用两个输入框切换显示状态,以及利用HTML5的placeholder属性。文章提供了完整的HTML结构和JS逻辑代码,并对比了两种实现方式,帮助开发者解决密码框默认显示提示的需求。
双输入框切换实现密码提示
在Web开发中,有时需要在密码输入框未输入内容时显示提示文字,而输入后则显示掩码字符(如*号)。由于原生password类型不支持直接显示提示文字,通常采用双输入框切换的方案:准备两个样式和定位相同的文本框,一个为type="text"用于显示提示(如“请输入密码”),另一个为type="password"用于实际接收密码。初始状态下隐藏password框,显示text框;当用户聚焦text框时,隐藏text框并显示password框;若检测password框值为空,则再次切换回显示text框。以下代码示例额外包含了重置功能。
首先展示HTML结构部分。
<table class="login_table">
<tr>
<td>账号</td>
<td><input type="text" value="请输入您的账号" class="admin" /></td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" value="请输入您的密码"id="login_showPwd" />
<input type="password"id="login_password" style="display: none"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="登录" />
<input type="button" value="重置" id ="btn_res"/>
</td>
</tr>
</table>
接着提供JavaScript实现部分。
//账号部分
$(function(){
$(".admin").focus(function(){
if($(this).val() == "请输入您的账号"){
$(this).val("");
}
});
$(".admin").blur(function(){
if($(this).val() == ""){
$(this).val("请输入您的账号");
}
});
// 密码部分
$('#login_showPwd').focus(function(){
var text_value=$(this).val();
if(text_value == this.defaultValue){
$('#login_showPwd').hide();
$('#login_password').show().focus();
}
});
$('#login_password').blur(function(){
var text_value = $(this).val();
if(text_value==""){
$('#login_showPwd').show();
$('#login_password').hide();
}
});
//重置部分
$('#btn_res').click(function(){
$('.admin').val("请输入您的账号");
$('#login_password').hide().val("");
$("#login_showPwd").show();
});
});
HTML5 placeholder属性实现
下面介绍另一种在密码输入框底部显示文字的方法。
许多网站密码框内默认显示“密码”二字,过去常误认为是text类型,实际上利用HTML5新增的password标签属性即可实现。
<input type="password" name="pas" placeholder="密码"/>
只需在input标签中增加placeholder属性即可轻松实现。

以上介绍了实现密码框显示文字提示的两种主要代码方案,希望能对大家有所帮助。如有疑问欢迎留言,小编会及时回复。感谢对本站的支持!
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
