解决oninput在输入中文时,会获取拼音的问题

(1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音

如图所示:

(2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址:https://segmentfault.com/a/1190000012490380

为文本框添加compositionstart和compositionend方法,这样在使用微软自带输入法时,在进行input验证的时候,就不会验证拼音了,而是等中文输入完成后再进行验证

  • compositionstart:在输入中文或者语音等需要等待一连串的输入的操作之前,compositionstart事件会触发
  • compositionend:在输入中文或语音等完毕或取消时,compositionend事件会触发

(3)对应代码

//valDom:对应的文本框的id
function
Input_ValidateNum(valDom) { var isInputZh = false; var search = document.getElementById(valDom); search.addEventListener('compositionstart', function (e) { isInputZh = true; }, false); search.addEventListener('compositionend', function (e) { isInputZh = false; ValidateNum(valDom); //这个方法可以随意更换,是用来处理输入数据的 }, false); search.addEventListener('input', function (e) { if (isInputZh) return; ValidateNum(valDom);//这个方法可以随意更换,是用来处理输入数据的
}, false); }

处理方法对应的代码:

  //验证输入的是否是数字或英文
  //valDom:要进行验证的文本框
 function ValidateNum(valDom) {
   var domVal = $("#" + valDom + "").val();
   $("#" + valDom + "").val(domVal.replace(/[W]/g, ''));
  }

 

(4)在网页中的调用

控件的定义:

<input id="Title" type="text">

在页面的初始方法中,调用上面的方法

$(function () {         
            Input_ValidateCEN('Title');
        });

根据上面的步骤,完成之后,在输入的时候就可以对文本框的内容进行限制,对于微软输入法输入中文获取拼音的问题也就解决了,在这里再次感谢https://segmentfault.com/a/1190000012490380这个网址对应的方法,

参考https://segmentfault.com/a/1190000012490380这个网址

此文档用于平时的积累,如果有问题,请留言,不胜感激,谢谢

原文地址:https://www.cnblogs.com/sas1231/p/10476505.html