核心提示：为了格式化文本框输入，在文本框的 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>
可复制代码至些查看运行效果：
效果如下图：
注意：jQuery >1.4 < 2.0 才验证通过，3.0 失败
