input密码框禁止自动填充密码_input 禁止自动填充_遇见橘子7的博客-程序员宝宝

技术标签: html5  js  

问题:针对密码框浏览器默认自动填入密码,并且会弹出保存密码提示

解决办法: <input id="inputText" name="pswView" type="text" class="ps-input"                                autocomplete="off" placeholder="请输入密码" οnblur="checkPsd()"/>                  

<input name="psw" id="psw" type="text" style="display: none;" />

  inputEle.on("keydown", handlerKeydown);
        inputEle.on("compositionstart", function (e) {
            e.target.composing = true
        });
        inputEle.on("compositionend", function (e) {
            e.target.composing = false
            handlerPassword(e)
            // // 输入完成后触发input事件
        });
        inputEle.on("input", function (e) {
            // 避免输入拼音的时候触发该事件
            if (e.target.composing) {
                return
            }
            handlerPassword(e)
        });
        var cursorStart = 0;
        var cursorEnd = 0;
        function handlerKeydown(e) {
            if (e.target.composing) {
                return
            }
            cursorStart = inputEle[0].selectionStart;
            cursorEnd = inputEle[0].selectionEnd;
        }
        function handlerPassword(e) {
            var loginForm = document.getElementById("forLogin");
            var old_input = loginForm.pswView.value;
            var display_input = old_input;
            var hide_input = loginForm.psw.value.split("");
            if (e.originalEvent.data === ' ') {
                loginForm.pswView.value = hide_input.join("").replace(/./g, '*');
                return
            }
            var start = inputEle[0].selectionStart;
            var length = Math.abs(cursorEnd - cursorStart);
            if (length == 0) {
                if (display_input.length < hide_input.length) {
                    hide_input.splice(start, 1);
                } else {
                    hide_input.splice(cursorEnd, 0, display_input.slice(cursorEnd, start));
                }
            } else {
                if (display_input.length < hide_input.length && cursorStart === start) {
                    hide_input.splice(start, length);
                } else {
                    hide_input.splice(cursorStart, length, display_input.slice(cursorStart, start));
                }
            }
            var viewPsdValue = "";
            var psdValue = "";
            for (var i = 0; i < old_input.length; i++) {
                viewPsdValue += "*";
            }
            psdValue = hide_input.join("");
            loginForm.pswView.value = viewPsdValue;
            loginForm.psw.value = psdValue;
            inputEle[0].selectionStart = start;
            inputEle[0].selectionEnd = start;
            psd = psdValue
        }

        

注意:在输入框中文模式下输入数字,字母会触发两次input事件,所以要结合compositionstart 、input 、compositionend 事件分别判断

在英文状态下,输入只会触发input事件,然后在中文模式下输入会依次触发compositionstart 、input 、compositionend 事件,可以通过compositionstart 事件判断是中文模式还是英文模式,在中文模式下不执行input事件

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Gemini_7S/article/details/125641507

智能推荐

linux系统中交换区间(swap file)的解释_yang_chen_shi_wo的博客-程序员宝宝

Swap的调整对Linux服务器,特别是Web服务器的性能至关重要。通过调整Swap,有时可以越过系统性能瓶颈,节省系统升级费用。Swap空间的作用可简单描述为:当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用。这里的swap空间其实就是操作系统里面所说的虚拟存储空间,用于放置临时被交换出来的页面。那些被释放的空间可能来自一些很长时间没有什么操作的程序,

网办项目经验小结3-Ajax,获取URL参数_luofuIT的博客-程序员宝宝_不断获取ajax url

1:项目中,感觉这一句很有用:jsp中 String contextPath=request.getContextPath();具体说明:/XXXX.jsp">指的是根目录下的xxxx.jsp假设你的要目录http://localhost:8080,你现在访问的页面为http://localhost:8080/admin/manage.jsp则/XXXX.jsp">指向

Outlook Web App简介_weixin_34088583的博客-程序员宝宝

一、什么是Outlook Web AppOutlook Web Access简称OWA是基于微软Hosted Exchange技术的托管邮局的一项Web访问功能。通过访问Outlook Web Access页面,邮箱用户不需要安装Outlook 2007客户端软件,直接使用 Web 浏览器通过 Internet 读取或发送电子邮件、管理他们的日历地址簿,任务等协同办公功能。基于微软Hosted E...

扩展方法_ycxjex2006的博客-程序员宝宝_扩展函数相当于是静态方法吗

以下为msdn的解释: 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用。扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的。 它们的第一个参数指定该方法作用于哪个类型,并且该参数以 this 修饰符为前缀。扩展方法的要求如下:1  第一个参数是要扩展或者要操作的类型,这称为"被扩展的类型"2  为了指定扩展方法,要在被扩展的类型名称前面附加th

博弈论之SG函数_Eter`nal的博客-程序员宝宝_博弈sg值

博弈论之 SG 函数公平组合游戏ICG需满足的条件:(1)有两名玩家交替行动(2)游戏进行的任意时刻,可以执行的合法操作与轮到哪名玩家无关。(3)不能行动的玩家判负。有向图游戏:给定一个有向无环图,图中有唯一的起点,在起点上放有一枚棋子。两名玩家交替地把这枚棋子沿着有向边进行移动,每次可以移动一次,无法移动者判负。这样的游戏被称为有向图游戏。任何一个公平组合游戏都可以转化成有向图游戏。具体方法是:把每个局面看成图中的一个节点,把从它能到达的所有局面通过有向边连接起来。Mex 运算:

在应用程序中精确切换输入法_weixin_34143774的博客-程序员宝宝

如果在你的程序里需要输入很多的内容,比如各类单据,如果在进入每一个录入框的时候都能自动把输入法切换到合适的状态将会是一个很酷的特性,相比炫丽的界面而言打字到手抽筋的录入人员们对此会更加感兴趣。在winform中切换输入法是很简单的事情: foreach (InputLanguage iL in InputLanguage.InstalledInputLanguage...

随便推点

K8S 1.25版本安装dashboard_吕海洋的博客-程序员宝宝_kubernetes安装dashboard

新版本k8s安装dashboard 的方式不一样了,不自动生成token。

微信小店 API 手册_weixin_34410662的博客-程序员宝宝

微信商铺API手册V1.13目录1. 商品管理接口...............................

NOIP2016年普及组模拟考试(9.3) 3.笨笨连线游戏_XiaoZheng2003的博客-程序员宝宝

一、原题3.笨笨连线游戏(route.cpp)【题目描述】一天,妈妈在黑板上画了一个大大的圆,然后又在圆弧上标上1,2,3,...,,2N个数。然后让笨笨任意选取一对数(两个不同的数)上连一条直线。然后再任意选取一对数,再边一条直线,但这条直线不能和任何别的直线相交。每个数都要恰好与另一个数连一条直线。笨笨费了好大的劲才找出一种连线方案。妈妈在旁边问笨笨:给出N,请问不同的连线

转载 -- JAVA开发:SpringBoot多数据源配置_今城琼夏的博客-程序员宝宝

转载 – JAVA开发:SpringBoot多数据源配置引用: https://www.cnblogs.com/weigy/p/12857531.html整体项目搭建:数据源1:DataSource1Configpackage com.test.config;import com.alibaba.druid.pool.DruidDataSource;import org.apache.ibatis.session.SqlSessionFactory;import org.mybatis.sp

关于renren-wap-ugc-photo-service的架构_wangqiaowqo的博客-程序员宝宝

1、关于renren-wap-ugc-photo-service的架构pom.xml[code=&quot;java&quot;] com.xiaonei renren-wap-framework-utils com.xiaonei renren-wap-framework-logic xiaonei-pho...

【面试题】Spring IoC与DI、自动装配与循环依赖_架构攻城之路的博客-程序员宝宝

Spring IoC是Spring最经典设计,自动装配是IoC注入“自动化”的一个简化配置操作。尽管IoC注入帮我们管理了对象之间的依赖关系,但是仍可能发生设计不当而导致了循环依赖问题。强大Spring也提供了一些优雅的解决方案。目录什么是IoCIoC与控制反转如何理解IoC容器IoC注入方式优缺点比较自动装配装配方式循环依赖解决办法什么是IoCSpring IoC容器负责对象的生命周期和对象之间的(依赖)关系。在创建新的Bean时,IoC容器会自动注入新B

推荐文章

热门文章

相关标签