文本框倒叙输入让输入框的焦点始终在最开始的位置
2014-09-01 17:28
483 查看
所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置,如图所示,当我输入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实现了正常删除和倒叙输入。
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> .content { width: 300px;margin:0 auto;margin-top:50px; } ul { list-style: none; } .elem { width: 200px; } </style> <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> </head> <body> <div style=""> <ul> <li> <input type="text" class="elem"> </li> <li> <input type="text" class="elem"> </li> <li> <input type="text" class="elem"> </li> </ul> </div> <script>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(); //将选择的内容同步到当前的对象 } } $('.elem').on('keypress keyup', function() { if(event.keyCode === 8) return; setPosition(this,0); }); </script> </body> </html>
另外在附上相关的获取焦点位置的函数,可能你会用到
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,希望此文能够帮助你!
相关文章推荐
- 文本框倒叙输入让输入框的焦点始终在最开始的位置
- IE浏览器 下面的文本框,获得焦点后无法输入内容
- 两个文本框都输入数字后只要焦点一失去,在第三个文本框中就自动计算出前两个的和或者积
- 安卓:WebView中iframe,焦点字段出现两个文本输入框,位置错误
- 文本框失去焦点后js判断输入是否为数字
- 输入框失去焦点时对输入信息进行JS验证
- 用js怎么实现两个文本框内的value同步更新,比如我我在a这个里面输入11,在不失去焦点的情况下在B里出现
- Android EditText文本框重新获得焦点和输入完成后的检查事件触发
- 实现输入框右侧圆形X图标删除输入框内容,以及获取焦点消除hint
- input输入框获取焦点、获取焦点位置、焦点设置
- 文本输入一个人的学号,当光标离开输入框时,文本框内显示该学号对应的姓名
- 文本框限制输入类型<input>的输入框
- 文本框限制输入类型<input>的输入框
- js/jquery获取文本框输入焦点的方法
- <<锋利的jQuery>>样例改进利用, html文本输入框得到与失去输入焦点的提示信息显示切换函数
- IE6间歇性精神障碍:弹出Iframe层中的文本框“经常”无法获得输入焦点
- 获取文本框中焦点的位置 兼容IE,FireFox
- 通过JS实现文本框获得输入焦点时的状态
- js设置文本框中焦点位置在最后的示例代码(简单实用)
- css如何让文本框中的输入的文字始终垂直居中