Js中密码框显示提示的方法【代替placeholder】

最新推荐文章于 2021-06-03 12:00:43 发布
最新推荐文章于 2021-06-03 12:00:43 发布
阅读量326 收藏
点赞数
分类专栏： Javascript Dom 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maders_M/article/details/104848583
版权
这篇博客介绍了在JavaScript中如何实现在文本框聚焦时不显示字符，失去焦点后恢复显示的效果，特别是针对type='password'的密码框，由于value值加密，作者通过改变文本框类型来实现类似placeholder的功能。
摘要由CSDN通过智能技术生成

刚学习JavaScript Dom第三天 ，准备写一个鼠标焦点在文本框上不显示字符，移开继续显示。但在写 type = password时，value的值以加密的形式展现。同时，placeholder在JavaScript不知道怎么控制（百度很久也没查到具体方法）。

 <input type="text" id="psw" autocomplete="off" value="密码" class="user_text">

  user_psw.onfocus</
最低0.47元/天 解锁文章
Maders_M
关注
专栏目录
js 简单的密码强度提示
想飞的猪的博客
09-04 1176
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=" utf-8"&gt; &lt;meta name="author" content="http://www.softwhy.com/" /&gt; &lt;title&gt;蚂蚁部落&lt;/tit
js实现输入框仿html5 placeholder功能
HiNet
07-23 5261
思路是将label定位到输入框上面，根据输入框内容判断显示或者隐藏label，当然如果浏览器支持html5则就使用placeholder功能就ok了，所以可以预先判断一下是否支持。方法很简单，下面代码直接运行可以实现效果。 New Document ul,li{list-style:none;margin:5px 0px;padding:0px;} .la
easyui combobox中input placeholder的替代方法
cc1314_工作、学习有感
08-29 6816
$('#pib_add_itemno').combobox({prompt:"请输入编号"});
placeholder兼容性问题以及用label代替placeholder
weixin_30567225的博客
04-24 296
什么是placeholder？ 答：HTML5中的一个新属性，用于表单元素中，规定可描述输入字段预期值的简短的提示信息，也就是表单元素中的预留文本。适用于下面的 input 类型：text、search、url、tel、email 和 password，还适用于textarea元素。 placeholder有哪些兼容性问题？ 答：1、placeholder在IE9及以前的浏览器中不...
html密码框效果不出来,JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果...
weixin_39552768的博客
06-03 363
本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果。分享给大家供大家参考，具体如下：思路：1、首先用把密码框用txt暂时替代，并赋上默认值 2、当文本框获取焦点后，把默认值清空，把type改为password。3、当文本框失去焦点后，把type改为txt，把默认值设为“请输入密码”。JS代码：window.onload=function(){var input=documen...
VUE前端实现密码输入的显示和隐藏
wujize的博客
04-16 8934
VUE前端实现密码输入的显示和隐藏 在用户前端登录时，密码输入框右边增加一个“眼睛”图标，实现用户输入密码的是显示星号还是字符，可以方便用户在输入复杂密码是确认，是一个比较符合用户使用习惯的非功能性设计。 一、准备图标 准备两个“眼睛”图标，第一个是闭上的，代表不显示密码，密码输入显示为*。SVG图标如下： <svg width="128" height="64" xmlns="http:...
蓝色渐变登录框网页模板
01-23
3. **输入框设计**：输入框通常会有边框和内阴影，以突出显示，并使用placeholder文本提示用户输入信息。在这个模板中，输入框可能会有与背景相协调的蓝色边框和高亮效果。 4. **按钮设计**：登录按钮是表单中的...
设计一个网站用户登录界面 用户登录界面的编写 划定一个盒子，用来装载登录界面基本信息，如：用户名、密码等，要求如下： 1、高度：250px; 2、宽度：450px; 3、内边距：10px; 4、边框线：宽度1px, 实线，黑色； 5、边框圆角值为：8px 6、盒子在页面居中显示。 7、盒子底纹为浅灰色； 用户界面的美化 1、界面引入iconfont.css字体样式，使用字体样式来代替用户名和密码； 2、用户名和密码灰色底纹；(2分) 3、用户名和密码左上和坐下8px的圆角；(2分) 4、用户名和密码的输入框加入底色，颜色值自拟；(2分) 5、用户名和密码的输入框的右上角和右下角8px圆角显示；(2分) 7、登录按钮高度40px,宽度305px，圆角8px,字体大小为25px，绿色底纹；白色字 完成忘记密码页面的跳转 1、“忘记密码”是一个超级链接； 2、超链接去除下滑线； 3、当鼠标移到到“忘记密码”时，下划线出现 4、“忘记密码”灰色字，12px； 完成用户名和密码的验证 1、使用js实现光标在用户名处锁定； 2、默认用户名和密码均为：root; 3、使用js获取页面上的用户名和密码; 4、当页面没有输入用户名、密码时点击提交按钮，弹出框提示“用户名密码为空”； 当页面输入的用户名和密码跟默认的用户名密码不匹配时，弹出框提示“用户名或密码不正确”；
06-10
<input type="password" placeholder="密码" /> 登录 忘记密码 const usernameInput = document.querySelector('input[type="text"]'); const passwordInput = document.querySelector('input[type=...
jQuery仿手机微信支付输入密码界面效果.zip
最新发布
09-22
为了安全起见，真实的密码不会直接显示，而是用星号或圆点代替，例如： ```javascript $('#pin-code').on('keyup', function() { var password = $(this).val(); var maskedPassword = '*'.repeat(password....
js自定义密码输入框弹窗
05-29
js自定义密码输入框弹窗的demo，因项目需要所以编写了这个小demo，如有需要同志们可以自行下载直接复制粘贴就行，然后浏览器打开测试。
js正则实现的密码框简单制作,还可以替换成自己想用得符号
10-30
js正则实现的密码框简单制作,还可以替换成自己想用得符号
Js制作点击输入框时默认文字消失的效果
10-23
为了提高用户体验和易用度，一些设计师会对网页中用户经常用的东西进行优化，比如输入框。一般的输入框是怎样优化的呢？从用户体验的角度出发，简化用户使用步骤，让用户用得更方便就是提高了易用性
基于JS实现密码框(password)中显示文字提示功能代码
11-22
其实实际上实现中并不能让password中显示文字提示，但是我们在工作中有这样的需求，当没输入东西的时候，框内有提示输入密码，但是当输入东西的时候又显示的是*号，那么是如何实现的呢？其实原理很简单，就是放两个文本框，样式以及定位都是一样的。先将type为password的隐藏，只显示type为text的伪密码框，value设置提示内容例如请输入密码。然后当input触发的时候，type为text的input隐藏，让type为password的input显示出来。然后当检测password的value为空的时候，再将type为password隐藏，type为text的显示。啥话也不说了，上代码。
原生js实现密码输入框值的显示隐藏
10-19
主要为大家详细介绍了原生js实现密码输入框值的显示隐藏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript搜索框点击文字消失失焦时文本出现
10-25
主要介绍了javascript实现搜索框点击文字消失失焦时文本出现的效果，示例代码如下，大家可以看看
使用JavaScript实现placeholder效果，不使用placeholder。
qq_44722972的博客
04-14 418
使用JavaScript实现placeholder效果 主要使用“focus”和“blur”的监听方法，实现了文本框未聚焦时，文本框内为灰色的提示文本，聚焦之后提示文本消失，输入的文字为黑色，若没有输入文字，失焦时文本框内重新显示灰色提示文本。 下面先放代码 <!DOCTYPE html> <html lang="en"> <head> <meta...
JavaScript实现输入框(密码框)出现提示语
weixin_52630329的博客
01-04 2905
JavaScript实现输入框(密码框)出现提示语 我们需要在登陆表单有一些提示语言，比如“请输入用户名”和“请输入密码”等语言，至于用户名好说，但是在密码框中出现“请输入密码”这样的语言就有点麻烦了，因为在密码框输入的内容不会以明码显示。如果动态的控制type属性的话就有兼容性问题，如果input已经存在于页面中的话，在IE8和IE8以下浏览器中，type属性是只读的。所以就得想其他办法，代码如下: 以上代码实现了我们的要求，可以出现明码的提示，当输入密码的时候就是以密码方式输入。 实现的原理非常的简单
vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
热门推荐
CodingNoob
04-28 1万+
github效果在线预览仓库地址： https://github.com/zhongyoucong/vuejs/vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下：登入后： 登入前： 登录框: 注册框： html代码部分：
js实现input密码框提示信息的方法(附html5实现方法)
10-22
主要介绍了js实现input密码框提示信息的方法,涉及JavaScript页面元素的获取,属性判断及样式设置等技巧,并附带html5的相关实现方法,需要的朋友可以参考下
html中密码框和确认密码框要求用密码显示形式
06-03
好的，您需要在 HTML 中创建一个密码框和确认密码框，并且要求这两个框都以密码形式显示。您可以使用 HTML 中的 input 标签，并将 type 属性设置为 "password" 来创建密码框，如下所示： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值