前端输入密码显示**，点击某个控件显示数字

最新推荐文章于 2025-05-27 09:09:27 发布

前端-珊珊

最新推荐文章于 2025-05-27 09:09:27 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端输入框显示 jquery

本文链接：https://blog.youkuaiyun.com/qq_34672907/article/details/78356796

本文介绍如何使用jQuery实现网页上密码输入框的显示与隐藏功能，包括基本的切换类型方法及更复杂的显示为星号的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先这个是回答别人问题的答案。但由于第一次粘贴的答案是有bug的，所以想进行第二次回复，结果被禁言了，一脸懵逼，好吧，禁就禁吧，我将答案写成博客不会被禁了吧？首先说明一下，这是基于jquery的

最简单的是现有的可以用一下办法

       显示密码
       $('#passWord').attr('type','text');
       隐藏密码
       $('#passWord').attr('type','password');

--------------------------------------------------------------------------------------完美分割线--------------------------------------------------------------------------------------------------------------------

       如果你需求是****的话，代码如下
           var hide = false;
           var numbers = null;
           var shanStr = "";
           $("#passWord").bind('input porpertychange', function() {
               var value = $(this).val();
               var str = "";
               $(this).val().length == 1 ? numbers = $(this).val().toString() : numbers = numbers + ($(this).val().toString()).substring(value.length - 1, value.length);
               for(var i = 0; i < value.length; i++) {
                   str = str + "*"
               }
               shanStr = str;
               if(hide == false) {
                   $(this).val(str)
               }
           })
           $("#getNumber").unbind("click").bind("click", function() {
               $("#passWord").val("")
               if(hide == true) {
                   $("#passWord").val(shanStr);
                   hide = false;
               } else {
                   $("#passWord").val(numbers);
                   hide = true;
               }

})

粗糙的代码，各位大神优化后可以分享一下给我呢