这篇文章主要介绍了实现密码框(password)中显示文字提示功能代码,在项目开发中经常会用到，需要的朋友可以参考下
其实实际上实现中并不能让password中显示文字提示，但是我们在工作中有这样的需求，当没输入东西的时候，框内有提示输入密码，但是当输入东西的时候又显示的是*号，那么是如何实现的呢？其实原理很简单，就是放两个文本框，样式以及定位都是一样的。先将type为password的隐藏，只显示type为text的伪密码框，value设置提示内容例如请输入密码。然后当input触发的时候，type为text的input隐藏，让type为password的input显示出来。然后当检测password的value为空的时候，再将type为password隐藏，type为text的显示。啥话也不说了，上代码。(ps:额外添加了重置功能)
先上html部分
<table>
<tr>
<td>账号</td>
<td><input type="text" value="请输入您的账号" /></td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" value="请输入您的密码"id="login_showPwd" />
<input type="password"id="login_password"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="登录" />
<input type="button" value="重置" id ="btn_res"/>
</td>
</tr>
</table>
然后上js部分
//账号部分
$(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();
});
});
下面给大家介绍密码输入框 底下显示的文字方法
一个小的提示很多网站密码输入框里面都有密码两个字，以前以为是text的，值到今天才知道，它就是password标签，写法如下
<input type="password" name="pas" placeholder="密码"/>
加了一个placeholder属性就好了
以上所述是小编给大家介绍的实现密码框(password)中显示文字提示功能代码的相关知识，希望对大家有所帮助
- 2013年福建中医药大学附属第二人民医院体检中心招聘公告
- 2013年福建中医药大学附属第二人民医院体检中心招聘岗位/人数及资格条件
- 雅安市司法局2013年公招下属事业单位人员面试资格复审公告
- 2013年福建省第二人民医院本部招聘第五批编外人员考试面试时间通知
- 2013年福建省省妇幼保健院编内专技岗位招聘笔试成绩公示
- 雅安市政府应急指挥中心2013年公招面试资格复审通知
- 2013年浙江农林大学环境与资源学院合同制工作人员招聘启事
- 2013年福建省省妇幼保健院编内专业技术人员招聘技能成绩公示
- 广西机电工业学校2013年招聘编制内人员公告
- 雅安市荥经县2013年考聘综合类事业单位工作员资格复审公告
- 雅安市委机要局2013年公招下属事业单位工作人员面试资格复审公告
- 2013年福州市福清市事业单位招考部分岗位递补人员体检结果公告
- 雅安市雅职院及附属医院2013年公招综合类事业人员面试资格复审公告
- 柳州市住房和城乡建设委员会直属事业单位2013年招聘人员第二批拟聘用人员公示
- 2013年中山大学南方学院招聘文学与传媒系普通话测试站秘书启事
- 2013年中山大学南方学院公开招聘思政通识教育部副主任启事
- 雅安市金融研究中心2013年招聘面试资格复审公告
- 事业单位调动问题？
- 雅安市住房公积金管理中心2013年公招综合类事业单位人员面试资格复审公告
- 2013年广州中医药大学第一附属医院肿瘤科招聘专科秘书启事
- 雅安市市民政局2013年公招下属事业单位工作人员面试资格复审公告
- 2013年海南省澄迈县招聘乡镇农场专职统计员面试通知
- 雅安市名山区2013年公招综合类事业单位工作人员面试资格复审公告
- 雅安市委宣传部2013年公招综合类事业人员面试资格复审公告
- 雅安市林业局2013年考聘下属事业单位工作人员面试资格复审公告
- head for
- head off
- head on
- head out
- head start
- heads up
- head to head
- head up
- hear about
- hear from
- 叩问
- 叩阍
- 叩首
- 叩齿
- 只
- 只
- 只1
- 只2
- 只争朝夕
- 只可意会，不可言传
- 2022社区疫情防控工作总结范文五篇
- 2022社区疫情防控工作总结范文10篇
- 个人工作自我总结11篇
- 个人工作情况总结2023年十篇
- 个人年度2022工作总结（10篇）
- 财务会计年终个人工作总结模板18篇
- 2022年终个人工作总结
- 2023办公室主任工作总结
- 办公室主任工作总结10篇
- 火灾疏散消防演练总结