• 技术文章 >web前端 >js教程

    文本框倒叙输入让输入框的焦点始终在最开始的位置_javascript技巧

    2016-05-16 16:38:01原创736
    所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置,如图所示,当我输入123456789时,在输入框上显示的是987654321。


    为什么要做这个Demo?是因为在项目中遇到了,项目需求是两个输入框,一个正序输入,另一个倒叙输入。 下面我把实现的思路和代码写出来。
    文本倒叙输入:

    只要我们保证输入框的焦点始终在第一位,这样的话就可以实现每次我们输入的都在最前面,即倒叙

    代码:

    function setPosition(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(); //将选择的内容同步到当前的对象
    }
    }

    只要我们将参数pos设为0就可以了。

    下面是一个完整的Demo,这个Demo实现了正常删除和倒叙输入。

    
    
    
    
    
    
    
    
    

    另外在附上相关的获取焦点位置的函数,可能你会用到

    function getPosition(ctrl) {
    // IE Support
    var CaretPos = 0; 
    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);
    }

    总结:

    实现了设置和获取文本输入焦点,我们就可以做一些其他的特效,比如删除一整个单词或者变量等等。

    如果你有关于此文的好想法,可以@me,希望此文能够帮助你!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:关闭页面window.location事件未执行的原因及解决方法_javascript技巧 下一篇:JavaScript中九种常用排序算法_javascript技巧
    Web大前端开发直播班

    相关文章推荐

    • 浅析Angular变更检测机制,聊聊如何进行性能优化?• 深入浅析Node.js中常见的内置模块• JavaScript对象的构造函数和new操作符(实例详解)• Angular知识点分享:聊聊表单、管道、绑定、指令、通信和周期• 深入聊聊node.js中的EventEmitter
    1/1

    PHP中文网