所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入123456789时，在输入框上显示的是987654321。
为什么要做这个Demo？是因为在项目中遇到了，项目需求是两个输入框，一个正序输入，另一个倒叙输入。 下面我把实现的思路和代码写出来。
文本倒叙输入：
只要我们保证输入框的焦点始终在第一位，这样的话就可以实现每次我们输入的都在最前面，即倒叙
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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实现了正常删除和倒叙输入。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!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> |
另外在附上相关的获取焦点位置的函数，可能你会用到
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function getPosition(ctrl) {// IE Supportvar CaretPos = 0; if (document.selection) {ctrl.focus();var Sel = document.selection.createRange();Sel.moveStart('character', -ctrl.value.length);CaretPos = Sel.text.length;}// Firefox supportelse if (ctrl.selectionStart || ctrl.selectionStart == '0')CaretPos = ctrl.selectionStart;return (CaretPos);} |
总结：
实现了设置和获取文本输入焦点，我们就可以做一些其他的特效，比如删除一整个单词或者变量等等。
如果你有关于此文的好想法，可以@me，希望此文能够帮助你！
