基于JS的密码框显示文字提示功能的代码

其实在实现中，我们是不能让密码中显示单词提示的，但是我们在工作中有这样的要求。当什么都没输入时，会在框中提示输入密码，但当输入某些内容时，会显示*符号。那么是如何实现的呢？其实原理很简单，就是放两个文本框，样式和定位都是一样的。首先，隐藏密码类型，只显示文本类型的伪密码框。例如，请输入密码。然后，当输入被触发时，类型为文本的输入被隐藏，类型为密码的输入被显示。然后，当检测到密码的值为空时，隐藏类型密码的显示，并显示类型文本。什么都别说，代码。(ps:额外增加了复位功能)

先转到html。

Class=' login _ table' trtd帐号/TDT input type='text' value='请输入您的帐号' class=' admin '/td/trtd密码/Td输入类型=' text ' value='请输入您的密码' id=' log in _ show pwd '/输入类型=' password ' id=' log in _ password ' style=' display : none '/Td/TRT input type=' button ' value=' log in '/输入类型=' button ' value=' reset ' id=' BTN _ RES '

//账号部分$ (function () {$(')。admin’)。focus (function () {if ($ (this))。val ()=='请输入您的账号'){$(this)。val(“”)；}});$ ('.admin’)。blur (function () {if ($ (this))。val ()=='') {$ (this)。val('请输入您的账号')；}});//密码部分$ ('# login _ showpwd ')。focus(function(){ vartext _ value=$(this))。val()；if(text _ value==this . default value){ $(' # log in _ show pwd ')。hide()；$('#login_password ')。显示()。焦点()；}});$('#login_password ')。blur(function(){ var text _ value=$(this))。val()；if(text _ value==' '){ $(' # log in _ show pwd ')。show()；$('#login_password ')。hide()；}});//重置零件$ ('# BTN _ RES ')。单击(function () {$(')。admin’)。val('请输入您的账号')；$('#login_password ')。隐藏()。val(“”)；$('#login_showPwd ')。show()；});});我们来介绍一下密码输入框下显示的文本方法。

一个小提示很多网站的密码输入框里都有密码这个词，以前认为是文字，但是这个值直到今天才知道。是密码标签，写的如下。

type=' password ' name=' pas ' placeholder=' password '/只需添加一个占位符属性。

以上是边肖介绍的实现密码框显示文字提示功能代码的知识。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！