这是一个数字密码,要能够智能的跳转到文本的某个位置,就需要通过JS来控制跳转!
1.onkeyup监听
<input class="put" id="number-password-input" type="tel" maxlength="12" tabindex="6" onkeyup="dealKeyup(this);">
2.智能判断
// 光标定位
function dealKeyup(that) {
var input_val = $(that).val();
var input_arr = input_val.split("-");
for(var i=0;i<input_arr.length;i++) {
if (input_arr[i] == ' ') {
setCaretPosition(that, i*2);
return;
}
}
}
这个方法,获取输入框的值,处理成数组。遍历数组,找寻到第一个为空的位置,定位到这个位置。
3.处理光标定位
// 获取光标位置
function getCursortPosition(ctrl) {
var CaretPos = 0; // IE Support
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;
return (CaretPos);
}
// 设置光标位置
function setCaretPosition(ctrl, pos){
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
亲测可用!
方法论:没想到js还可以这么玩定位,有意思!