为了格式化文本框输入，在文本框的 keyup 事件中，会更改文本框的值，而更改会导致光标位置的变化移到最后，从而使得没法在中间连续插入字符。
以下代码为根据格式化后的内容来重置光标位置，实现一个只能输入16进制文本的功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script>
$(function(){
$("#i").keyup(
function(event){
var pos = $(this).caret('pos');
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('pos', pos);
}
}
);
});
</script>
</head>
<body>
<h1>16进制输入</h1>
<p id="note">输入16进制字符，自动格式化</p>
<input type="text" id="i">
<script src="https://cdn.bootcss.com/Caret.js/0.1.0/jquery.caret.min.js"></script>
</body>
</html> 可复制代码至些查看运行效果：
http://www.runoob.com/try/try.php?filename=tryjs_events
效果如下图：
扫一扫
8969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
