input 输入框中, 不允许输入某些特殊字符, 当输入特殊字符时替换成空.
问题: 绑定 keyup 事件, 为了用户输入方便, 当用户点击方向键时进行修改, 也会触发 keyup 事件, 这时光标会跳到最后一位....
解决方案一: 可以用 keycode 键的 ASCll 排除掉, 但是点击键盘的其他键光标还是会跳到最后一位.
解决方案二: 先获得光标的位置信息, 然后进行数据处理操作, 最后定位到原来光标的位置.
代码如下:
- // 绑定 keyup 事件, 调用 replaceStr() 函数
- function replaceStr(){
- // 获得光标位置
- var ctrl= document.getElementById('preInfo');
- var CaretPos = 0; // IE Support
- if(!+"\v1"){
- if (document.selection){
- ctrl.focus ();
- var Sel = document.selection.createRange ();
- Sel.moveStart ('character', -ctrl.value.length);
- CaretPos = Sel.text.length;
- }
- }
- // Firefox support
- else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
- CaretPos = ctrl.selectionStart;
- //IE 中有 event, 火狐中 arguments.callee.caller.arguments[0] || window.event
- event=arguments.callee.caller.arguments[0] || window.event;
- }
- //alert(CaretPos);// 打印光标位置
- //alert(event.keyCode)// 打印键的 ASCLL
- if((event.keyCode == 188)||(event.keyCode == 190)||(event.keyCode == 16)||(event.keyCode ==222)){
- // 当键盘输入 "" & <> 特殊符号时, 执行替换为空串.
- var replaceStr=document.getElementById('preInfo').value;
- replaceStr=replaceStr.replace(/[\"\&\=\:\<\>]+/g,"");
- document.getElementById('preInfo').value=replaceStr;
- }
- // 设置光标位置
- //if(!+"\v1"){
- if(ctrl.setSelectionRange){
- ctrl.focus();
- ctrl.setSelectionRange(CaretPos,CaretPos);
- console.log(CaretPos);
- } else if (ctrl.createTextRange) {
- var range = ctrl.createTextRange();
- range.collapse(true);
- range.moveEnd('character', CaretPos);
- range.moveStart('character', CaretPos);
- range.select();
- }
- //}
- }
来源: https://www.2cto.com/kf/201505/399902.html