zoukankan      html  css  js  c++  java
  • 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还可以这么玩定位,有意思!

  • 相关阅读:
    js打印的两种方法
    C# VS2010中,用微软自带的System.Data.OracleClient来连接Oracle数据库
    js获取本月第几周和本年第几周
    [转]优化数据库大幅度提高Oracle的性能
    sass的循环for,while,each
    sass的mixin,extend,placeholder,function
    float,absolute脱离文档流的总结
    React ref的用法
    cloneNode与事件拷贝
    mobx动态添加observable
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/6510114.html
Copyright © 2011-2022 走看看