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,如需转载请自行联系原作者

相关文章
|
9月前
|
监控 数据可视化 安全
如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)
three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统
211 1
|
12月前
|
JSON 前端开发 JavaScript
javascript:layui实现定位、查询数据以及select筛选的组合功能
javascript:layui实现定位、查询数据以及select筛选的组合功能
278 0
|
JavaScript 定位技术
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
282 0
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案:svg + popper.js 定位引擎
|
9月前
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
150 0
|
2月前
|
JSON JavaScript 前端开发
JS逆向快速定位关键点之9大通用hook脚本
JS逆向快速定位关键点之9大通用hook脚本
144 0
|
7月前
|
JavaScript API
js让光标选择节点中部分文本
js让光标选择节点中部分文本
47 1
|
Web App开发 前端开发 JavaScript
Selenium 如何定位 JavaScript 动态生成的页面元素
Selenium 是一个自动化测试工具,可以用来模拟浏览器的操作,如点击、输入、滚动等。但是有时候,我们需要定位的页面元素并不是一开始就存在的,而是由 JavaScript 动态生成的。这时候,如果我们直接用 Selenium 的 find_element 方法去定位元素,可能会出现找不到元素的错误,因为页面还没有加载完成。为了解决这个问题,我们需要使用一些特定的定位技巧,让 Selenium 等待元素出现后再进行操作。
424 0
|
10月前
|
JavaScript
js滚动导航定位--头部demo效果示例(整理)
js滚动导航定位--头部demo效果示例(整理)
|
11月前
|
JavaScript
【js中鼠标点击、移动和光标移动的事件触发】
【js中鼠标点击、移动和光标移动的事件触发】
180 0
|
11月前
|
JavaScript 定位技术 API
js获取高德地图自身定位
js获取高德地图自身定位
170 0