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

相关文章
|
1月前
|
JSON JavaScript 前端开发
JS逆向快速定位关键点之9大通用hook脚本
JS逆向快速定位关键点之9大通用hook脚本
|
1月前
编程笔记 html5&css&js 007 HTML文本:段落和格式
编程笔记 html5&css&js 007 HTML文本:段落和格式
|
1月前
编程笔记 html5&css&js 006 HTML文本:标题
编程笔记 html5&css&js 006 HTML文本:标题
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
27 0
|
3月前
|
JavaScript 前端开发 安全
JavaScript学习 -- 文本节点
JavaScript学习 -- 文本节点
16 0
|
3月前
|
JavaScript
JS的文本同步框
JS的文本同步框
16 0
|
3月前
|
JavaScript 前端开发 API
【JavaScript】复制文本到剪切板
Clipboard API是现代浏览器提供的一组JavaScript接口,用于访问和操作用户剪贴板中的内容。它提供了异步读取和写入剪贴板的功能,可以处理多种类型的数据,如文本、图像等。通过使用navigator.clipboard对象,开发者可以调用相关方法来读取和写入剪贴板中的内容。
36 0
|
4月前
|
JavaScript
(简单成功)原生js实现点击复制文本
(简单成功)原生js实现点击复制文本
34 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0