今天同事问一个关于光标移动到输入框最后的问题,问题得到了解决(详情请见《Javascript获取光标位置以及设置光标位置》),并且兼容IE、Firefox、Opera,可是又有了新问题:假如输入的内容过多,而Input已经不能显示最后部分的内容,光标即使移动到了最后,也是不能显示出来的。他要的效果是,类似于输入那种效果,当输入文字之后,内容往左走,这样光标就一直在最后显示,而不会出现光标虽然出现在输入框最后可是不能显示出来的现象。
原理
在Firefox我想的方法是模拟一次键盘事件:
如先建立document.createEvent(“KeyboardEvent”),然后光标移动到输入框最后,然后输入一个空格,在删除空格,这样子光标就会有在输入框最后不出现变为出现了~详细方法请见:Mozilla Developer Center
JS代码
function setCaretPosition(elemId){
> var elem = document.getElementById(elemId);
> var caretPos = elem.value.length;
> if (elem != null) {
> if (elem.createTextRange) {
> var range = elem.createTextRange();
> range.move('character', caretPos);
> range.select();
> }
> else {
> elem.setSelectionRange(caretPos, caretPos);
> elem.focus();
>
> //空格键
> var evt = document.createEvent("KeyboardEvent");
> evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
> elem.dispatchEvent(evt);
> // 退格键
> evt = document.createEvent("KeyboardEvent");
> evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
> elem.dispatchEvent(evt);
> }
> }
> }