jquery实现文本框倒序输入的例子__ctrl_range_pos_setSelectionRange_character_

当前位置: 编程技术>jquery

jquery实现文本框倒序输入的例子

来源: 互联网发布时间：2014-10-09

本文导语: 文本框倒序输入是指输入框的焦点始终在最开始的位置，例如当输入123456789时，在输入框上显示的是987654321。项目需求是两个输入框，一个正序输入，另一个倒序输入。文本倒序输入：只要保证输入框的焦点始终在第一位，...

文本框倒序输入是指输入框的焦点始终在最开始的位置，例如当输入123456789时，在输入框上显示的是987654321。

项目需求是两个输入框，一个正序输入，另一个倒序输入。

文本倒序输入：
只要保证输入框的焦点始终在第一位，即可以实现每次输入的都在最前面，即倒序。

代码：

代码示例:

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就可以了。

例子，实现正常删除和倒序输入。

代码示例:

jquery实现倒序输入_www.yuju100.com

.content {
width: 300px;margin:0 auto;margin-top:50px;
}
ul {
list-style: none;
}
.elem {
width: 200px;
}

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

代码示例:

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);

}

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