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

简介:
+关注继续查看

422101-20170306151538000-115702595.gif

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



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6510114.html如需转载请自行联系原作者

相关文章
|
7天前
|
JavaScript
js点击收缩展开文本(不能用废弃)
js点击收缩展开文本(不能用废弃)
|
1月前
|
JavaScript
js文本复制功能
js文本复制功能
|
2月前
|
JavaScript 前端开发 流计算
在 JavaScript 中闪烁文本
在 JavaScript 中闪烁文本
|
2月前
|
JavaScript
js实现文本复制功能
点击按钮复制文本内容 具体实现:
|
3月前
|
前端开发 JavaScript UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的键盘/文本
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的键盘/文本事件类型,包括输入事件、按键事件和复制/剪切/粘贴事件。
55 0
|
5月前
|
JavaScript 前端开发
JavaScript实战笔记(四) 选中文本高亮
JavaScript实战笔记(四) 选中文本高亮
87 0
|
5月前
|
JavaScript 前端开发
JavaScript实战笔记(三) 文本搜索
JavaScript实战笔记(三) 文本搜索
40 0
|
5月前
|
移动开发 前端开发 JavaScript
JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
115 0
|
5月前
|
JavaScript
js:判断文本溢出隐藏生效text-overflow: ellipsis
js:判断文本溢出隐藏生效text-overflow: ellipsis
116 0
js:判断文本溢出隐藏生效text-overflow: ellipsis
|
7月前
|
JavaScript
js基础笔记学习216文本节点1
js基础笔记学习216文本节点1
39 0
js基础笔记学习216文本节点1
相关产品
云迁移中心
推荐文章
更多