当前位置: 首页 > 编程笔记 >

基于JS实现密码框(password)中显示文字提示功能代码

端木宏才
2023-03-14
本文向大家介绍基于JS实现密码框(password)中显示文字提示功能代码,包括了基于JS实现密码框(password)中显示文字提示功能代码的使用技巧和注意事项,需要的朋友参考一下

其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的。先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码。然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来。然后当检测password的value为空的时候,再将type为password隐藏,type为text的显示。啥话也不说了,上代码。(ps:额外添加了重置功能)

先上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> 

然后上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)中显示文字提示功能代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍bootstrap提示标签、提示框实现代码,包括了bootstrap提示标签、提示框实现代码的使用技巧和注意事项,需要的朋友参考一下 首先聊一聊提示标签: 效果: 下面讲一讲提示框: 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于JS实现checkbox全选功能实例代码,包括了基于JS实现checkbox全选功能实例代码的使用技巧和注意事项,需要的朋友参考一下 需求:要求实现点击全选选中所有菜单,再次点击全选取消选中。此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: 以上所述是小编给大家介绍的基于JS实现checkb

  • 本文向大家介绍vue实现密码显示隐藏切换功能,包括了vue实现密码显示隐藏切换功能的使用技巧和注意事项,需要的朋友参考一下 先给大家分享效果图: 具体实现代码如下所示: html: script: 注:带小眼睛的睁开闭合。 总结 以上所述是小编给大家介绍的vue实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍基于JS+HTML实现弹窗提示是否确认提交功能,包括了基于JS+HTML实现弹窗提示是否确认提交功能的使用技巧和注意事项,需要的朋友参考一下 需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下 分析:这里面要,引入三个库文件,如下是下载地址   layui样式文件:https://layer.layui.com/   layer弹窗组件:https://ww

  • 本文向大家介绍基于PHP实现数据分页显示功能,包括了基于PHP实现数据分页显示功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了数据分页显示功能的PHP实现代码,供大家参考,具体内容如下 实现代码: 以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍easyUI实现类似搜索框关键词自动提示功能示例代码,包括了easyUI实现类似搜索框关键词自动提示功能示例代码的使用技巧和注意事项,需要的朋友参考一下 在一个DataGrid里面,搜索行所在位置 实现的效果如下: 在搜索框中输入部分列名关键字,即可匹配到行的位置。 EasyUI的SearchBox组件只提供了静态搜索框,我们可以使用ComboBox来实现动态的自动关键匹配效果,并且