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

所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入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，希望此文能够帮助你！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！