首页 > 代码库 > html搜索 中英文状态 如何区分
html搜索 中英文状态 如何区分
本文主要解决的问题; 中文输入法下 如何做到不会用拼音搜索
可参考： https://zhuanlan.zhihu.com/p/25709544
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input输入框for中文输入法</title> <script src=http://www.mamicode.com/"vue-2.js "></script> <style> .div{ margin-bottom: 10px; } </style></head><body><div id="app"> <label for="">监听onchange事件</label> <input type="text" v-model="changetext" v-on:change="change" placeholder="请试试中文输入法和英文输入法"> <div> onchange输入值:{{changevalue}} </div> <label for="">keydown事件</label> <input type="text" v-model="keydowntext" @keydown="keydown" placeholder="请试试中文输入法和英文输入法"> <div> keydown输入值:{{keydownvalue}} </div> <label for="">监听input事件,@input="input"(vue1 不可用,vue2 可用)</label> <input type="text" v-model="inputtext" @input="input" placeholder="请试试中文输入法和英文输入法"> <div> input输入值:{{inputvalue}} </div></div><script src=http://www.mamicode.com/"//cdn.bootcss.com/vue/2.1.10/vue.js"></script><script > new Vue({ el: ‘#app‘, data: { inputvalue: ‘‘, inputtext: ‘‘, changevalue: ‘‘, changetext: ‘‘, keydownvalue: ‘‘, keydowntext: ‘‘, compositiontext: ‘‘, compositionvalue: ‘‘ }, methods: { input: function (val) { //console.log(this.inputtext+ " " + this.inputtext) if (this.inputtext != this.inputvalue) { console.log("input:" + this.inputtext) this.inputvalue = http://www.mamicode.com/this.inputtext } }, compositioninput: function (val) { console.log("compositioninput:" + this.compositiontext) this.compositionvalue = http://www.mamicode.com/this.compositiontext }, change: function (val) { console.log("change:" + this.changetext) this.changevalue = http://www.mamicode.com/this.changetext }, keydown: function (val) { console.log("keydown:" + this.keydowntext) this.keydownvalue = http://www.mamicode.com/this.keydowntext }, compositionend: function(val) { console.log("compositionend:" + this.compositiontext) this.compositionvalue = http://www.mamicode.com/this.compositiontext } } })</script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input输入框for中文输入法</title> <script src=http://www.mamicode.com/"vue-1.js "></script> <style> .div{ margin-bottom: 10px; } </style></head><body><div id="app"> <label for="">监听onchange事件</label> <input type="text" v-model="changetext" v-on:change="change" placeholder="请试试中文输入法和英文输入法"> <div> onchange输入值:{{changevalue}} </div> <label for="">keydown事件</label> <input type="text" v-model="keydowntext" @keydown="keydown" placeholder="请试试中文输入法和英文输入法"> <div> keydown输入值:{{keydownvalue}} </div> <label for="">监听input事件,@input="input"(仍旧无法监听组合事件)</label> <input type="text" v-model="inputtext" @input="input" placeholder="请试试中文输入法和英文输入法"> <div> input输入值:{{inputvalue}} </div> <label for="">input+composition 监听compositionend事件,@compositionend="compositionend"</label> <input type="text" v-model="compositiontext" @input="compositioninput" @compositionend="compositionend" placeholder="请试试中文输入法和英文输入法"> <div> input输入值:{{compositionvalue}} </div></div><script > new Vue({ el: ‘#app‘, data: { inputvalue: ‘‘, inputtext: ‘‘, changevalue: ‘‘, changetext: ‘‘, keydownvalue: ‘‘, keydowntext: ‘‘, compositiontext: ‘‘, compositionvalue: ‘‘ }, methods: { input: function (val) { console.log("input:" + this.inputtext) this.inputvalue = http://www.mamicode.com/this.inputtext }, change: function (val) { console.log("change:" + this.changetext) this.changevalue = http://www.mamicode.com/this.changetext }, keydown: function (val) { console.log("keydown:" + this.keydowntext) this.keydownvalue = http://www.mamicode.com/this.keydowntext }, compositioninput: function (val) { if(this.compositionvalue != this.compositiontext) { console.log("do query 2:" + this.compositiontext) this.compositionvalue = http://www.mamicode.com/this.compositiontext } }, compositionend: function(val) { console.log("do query:" + this.compositiontext) this.compositionvalue = http://www.mamicode.com/this.compositiontext } } })</script></body></html>
html搜索 中英文状态 如何区分
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。