html密码框输入内容隐藏,密码框显示提示文字的功能实现

在密码输入框内显示提示的文字，引导用户操作，实现的效果如下图显示。

未输入密码前：

输入密码后：

由于js无法直接控制input文本框中的type属性，因此无法通过js控制input文本框在密码框和普通文本框之间转换。这里的实现原理为用两个文本框，一个文本框用于未输入密码前显示输入密码的提示文字，一个文本框用于用户操作输入密码(初始状态为隐藏)，当用户点击输入密码提示文字的文本框时，隐藏此文本框，显示密码输入用的文本框并获得焦点，当密码输入用的文本框失去焦点时，若此文本框没有输入字符，则隐藏此文本框，同时显示输入密码提示文字的文本框。具体实现代码如下：

html代码：

js代码：

$("#txtPasswordShow").focus(function () {

$("#txtPasswordShow").hide();

$("#txtPassword").show().focus();

});

$("#txtPassword").blur(function () {

if ($(this).val() == "") {

$("#txtPasswordShow").show();

$("#txtPassword").hide();

}

});

最终效果当密码输入框获得焦点时，输入的内容显示为“****”，当密码输入框失去焦点时，内容为空时显示“请输入密码”。即实现了密码框显示提示文字的功能啦！

html密码框输入内容隐藏,密码框显示提示文字的功能实现相关推荐

html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
【超详总结/理解：正则表达式】特点/元字符/正则表达式中的标志位-flag/RegExp/重复操作与后向引用/匹配模式/表达邮箱/正则表达式对象的方法/利用正则表达式限制网页表单里的文本框输入内容
文章目录正则表达式: 正则表达式的用途正则表达式的组成-元字符正则表达式的特点正则表达式中的标志位-flag JavaScript中的正则表达式解析 RegExp 定义 RegExp RegE ...
已解决selenium模块向网页input文本框输入内容失败问题
已解决(selenium向input文本框输入内容失败问题)selenium.common.exceptions.ElementNotInteractableException: Message: e ...
Java程序使用控制台输入时隐藏密码等敏感信息
发现了一个有趣的小东西,来分享一下. 使用System的console()方法可以获取到一个Console控制台对象. Console控制台对象的readPassword()方法可以获取到控制台输入的 ...
input得到焦点显示文本框,失去焦点隐藏文本框
上一篇 : input 输入的内容时更改input的宽度此篇是上一篇的延伸功能 input得到焦点显示文本框,失去焦点隐藏文本框思路 : 1 创建一个文本标签font和输入标签input,页面加载 ...
一个文本框输入中文，另一个显示拼音
<script type="text/javascript"></script> <script type="text/javascript ...
编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示
layui table表格展示效果代码前端代码后端代码:我们需要注意后端给前端返回数据的格式获取radio标签所对应的数据条目问题描述解决办法 layui监控select下拉框并将隐藏的 ...
【WPF】设置TextBox内容为空时的提示文字
原文:[WPF]设置TextBox内容为空时的提示文字 <TextBox Width="150" Margin="5"><TextBox.Re ...
android随笔25——搜索框输入内容后界面的隐藏逻辑
xml文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:t ...

html密码框输入内容隐藏,密码框显示提示文字的功能实现

html密码框输入内容隐藏,密码框显示提示文字的功能实现相关推荐

最新文章

热门文章