JS控制光标定位,定位到文本的某个位置

这是一个数字密码,要能够智能的跳转到文本的某个位置,就需要通过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还可以这么玩定位,有意思!

posted @ 2017-03-06 15:21  TBHacker  阅读(46443)  评论(0编辑  收藏  举报