您现在的位置：首页 >> 前端 >> 内容

自动格式化为16进度形式的文本输入框代码实例讲解

时间：2018/5/31 14:40:37 点击：

　　核心提示：为了格式化文本框输入，在文本框的 keyup 事件中，会更改文本框的值，而更改会导致光标位置的变化移到最后，从而使得没法在中间连续插入字符。以下代码为根据格式化后的内容来重置光标位置，实现一个只能输入...

为了格式化文本框输入，在文本框的 keyup 事件中，会更改文本框的值，而更改会导致光标位置的变化移到最后，从而使得没法在中间连续插入字符。

以下代码为根据格式化后的内容来重置光标位置，实现一个只能输入16进制文本的功能：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">   
<script src="https://www.examplet.org/js/jquery.js"></script>   
<script>  
          
$(function(){  
  $("#i").keyup(  
    function(event){   
        var posStart = $(this).caret().start;  
        var posEnd = $(this).caret().end;  
        var pos = posStart;  
        var ori_len = this.value.length;  
        if (pos > 0){  
            var left = this.value.substring(0, pos);  
            var right = this.value.substring(pos);  
            var left_ori_len = left.length;  
            left = left.replace(/[^0-9a-fA-F]/g, '').replace(/(\S{2})/g, '$1 ').replace(/^\s|\s$/g,'');  
            pos = left.length;  // 取得光标新的起始位置  
         }  
         this.value = this.value.replace(/[^0-9a-fA-F]/g, '').replace(/(\S{2})/g, '$1 ').replace(/^\s|\s$/g,'').toUpperCase();  
          
         if(this.value.length == ori_len){ // 长度没有变化，则保持原选择范围  
             $(this).caret({start:posStart, end:posEnd});  
         }else{  
             $(this).caret({start:pos, end:pos});  
         }  
    }  
  );  
});  
</script>  
  
</head>  
<body>  
  
<h1>16进制输入</h1>  
<p id="note">输入16进制字符，自动格式化</p>  
<input type="text" id="i">  
  
<script src="https://www.examplet.org/js/jquery.caret.min.js"></script>  
</body>  
</html>

可复制代码至些查看运行效果：

效果如下图：

自动格式化为16进度形式的文本输入框代码实例讲解