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

 更新时间:2016年05月27日 09:07:11   作者:韩一宁  
这篇文章主要介绍了实现密码框(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)中显示文字提示功能代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 微信小程序实现多宫格抽奖活动

    微信小程序实现多宫格抽奖活动

    这篇文章主要为大家详细介绍了微信小程序实现多宫格抽奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 10个必备的JavaScript async/await工具函数分享

    10个必备的JavaScript async/await工具函数分享

    当谈到异步编程时,async/await是JavaScript中常用的功能之一,本文为大家整理了10个常用的await和async函数示例,感兴趣的小伙伴可以参考一下
    2023-12-12
  • showModalDialog模态对话框的使用详解以及浏览器兼容

    showModalDialog模态对话框的使用详解以及浏览器兼容

    showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面。区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了)
    2014-01-01
  • ES6入门教程之Iterator与for...of循环详解

    ES6入门教程之Iterator与for...of循环详解

    最近在学习ES6,刚刚看到Iterator和for...of循环这一章,所以想要跟大家略微分享一下,下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料,不足之处还望大家多多指正,需要的朋友们可以参考学习。
    2017-05-05
  • JavaScript字符串分割处理的方法总结

    JavaScript字符串分割处理的方法总结

    这篇文章主要介绍了JavaScript字符串分割处理的几种方法,js截取重要的三要素substring()、subsstr()、slice(),下面文章围绕这三要素展开全文,需要的小伙伴可以参考一下
    2022-03-03
  • vant uploader实现上传图片拖拽功能(设为封面)

    vant uploader实现上传图片拖拽功能(设为封面)

    这篇文章主要介绍了vant uploader实现上传图片拖拽功能(设为封面),这个功能在日常生活中经常会用到,操作非常方便,今天通过实例代码介绍实现过程,需要的朋友可以参考下
    2021-10-10
  • 基于JavaScript实现单例模式

    基于JavaScript实现单例模式

    这篇文章主要介绍了基于JavaScript实现单例模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • JavaScript的Module模式编程深入分析

    JavaScript的Module模式编程深入分析

    Module模式是常见的JavaScript编程模式,一般来说这种模式是很好理解的,但是依然有一些高级的用法没有得到太多的注意。在这篇文章中我会提到Module模式的基础知识和一些真正重要的话题,包括一个可能是我原创的
    2013-08-08
  • 4种JavaScript实现简单tab选项卡切换的方法

    4种JavaScript实现简单tab选项卡切换的方法

    这篇文章主要介绍了4种JavaScript实现简单tab选项卡切换的方法,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 浅谈微信小程序之官方UI框架we-ui使用教程

    浅谈微信小程序之官方UI框架we-ui使用教程

    这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程,WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,感兴趣的小伙伴们可以参考一下
    2018-08-08

最新评论