input输入框如何处理中英文输入

input可以监听keydown,keyup,input,change等事件
keydown: 键盘按下
keyupp: 键盘回弹
input: 输入
change: 失去焦点触发

如果你要通过监听input的value值改变然后发送ajax请求来获取数据，input可以处理，每输入一个字符就触发一次，失去焦点之后也可以触发change发送ajax。
但是这是面对英文输入，当遇到中文输入的时候，按下第一个拼音，但没按下空格输入到input的时候，就会触发input事件，但实际上input的value是空，或者说连续输入中文的时候，空格之后第一下输入拼音，会触发input事件，但是实际上内容没有改变，这样发送ajax请求是没有意义的。
这时候就要用到两个事件，compositionstart和compositionend
compositionstart，监听输入开始
compositionend，监听输入结束
这对中文输入来说十分有用
但输入第一个拼音但没有按下空格的时候，会触发compositionstart,按下空格后触发compositionend，
这样子就可以通过监听这两个事件来监听input的value改变来发送ajax

// $.extend({//     handleInput: function(className){//         $(`${className}`).on('input', function(){//             let _this = this;
//             setTimeout(function(){//                 if(flag){//                     console.log($(_this).val())
//                 }
//             })
//         })
//         $(`${className}`).on("compositionstart", function(){//             flag = false;
//         })
//         $(`${className}`).on("compositionend", function(){//             flag = true;
//         })
//     }
// })

input输入框如何处理中英文输入相关推荐

vue实现input输入框控制最多输入一位小数
vue实现input输入框控制最多输入一位小数, 直接在校验规则中写上js正则表达式就行,表达式如下: /^(\d+\.\d{1,1}|\d+)$/
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
vue中，input输入框只允许输入数字
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,以供大家参考这里需用到vue修饰符不了解的同学可去vue官网看看,或者百度看看其他文档的讲解. .number 如果想自动将用户的 ...
input输入框模拟验证码输入效果
今天看到一个帖子,说到用input输入框模拟滴滴.摩拜等app验证码输入效果,提到了一个方案: 1.利用input来获得焦点,自动调用手机的数字键盘 2.实际将输入框用透明度隐藏 3.用label的f ...
input输入框的限制输入
限制输入正则表达式一·.限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 2.onchange ...
input输入框限制只能输入数字的方法
在项目中会遇到表单填写的时候在input中输入纯数字的情况,这个时候需要我们在输入框对用户的输入做一些限制 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup=&quo ...
input输入框限制只能输入数字
昨天博主接到一个需求说form表单里面的input输入框有些你得给它限制一下,不要比如有些限制一下只能让他输入数字,不能让客户输入文字或者英文我这边给大家提供两种方法来实现这个功能,当然,我把相关情 ...
input 输入框限制只能输入两位有效小数
前端入门即教学,今天博主分享几个前端金额实用的小案例,复制拿过去就能用哦! 相信有很多前端小伙伴在工作中遇到过这样的需求,就是限制输入框内容只能输入两位小数吧,想了用正则但是又不知道怎么下手的同学,接 ...
html 输入框输入事件,input 输入框内的输入事件详细分析
1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件. 2.用例:对每个浏览器分别测试 ...

input输入框如何处理中英文输入

input输入框如何处理中英文输入相关推荐

最新文章

热门文章