首页 > JavaScript/ 网络技术 > Javascript设置光标位置到结尾并显示出来

Javascript设置光标位置到结尾并显示出来

今天同事问一个关于光标移动到输入框最后的问题,问题得到了解决(详情请见《Javascript获取光标位置以及设置光标位置》),并且兼容IE、Firefox、Opera,可是又有了新问题:假如输入的内容过多,而Input已经不能显示最后部分的内容,光标即使移动到了最后,也是不能显示出来的。他要的效果是,类似于输入那种效果,当输入文字之后,内容往左走,这样光标就一直在最后显示,而不会出现光标虽然出现在输入框最后可是不能显示出来的现象。

原理

在Firefox我想的方法是模拟一次键盘事件
如先建立document.createEvent(”KeyboardEvent”),然后光标移动到输入框最后,然后输入一个空格,在删除空格,这样子光标就会有在输入框最后不出现变为出现了~详细方法请见:Mozilla Developer Center

JS代码

函数setCaretPosition代码如下:


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

查看DEMO演示

相关文章

"Javascript设置光标位置到结尾并显示出来"已有8条评论
    cc

    这么牛的文章竟然没人顶?
    顶!

    2010年01月31日 21:54 回复 引用

    yellow

    顶一个
    问下为什么不能直接模拟键盘的end按钮事件, 使光标到输入框末尾呢?

    2010年02月03日 19:29 回复 引用

    断桥残雪

    本来我也是这么想的,可是好像小键盘区不能模拟

    2010年02月03日 21:02 回复 引用

    【从零开始】

    如何解决抢光标的问题,谁能给个解决方案啊。。。,

    2010年05月30日 04:53 回复 引用

    【从零开始】

    如何用 focus() 这个方法来解决抢光标的问题,

    2010年05月30日 04:57 回复 引用

    LOO2K

    可惜了 chrome 不能支持。

    2010年07月24日 20:08 回复 引用

    Rocky

    只触发一个输入事件就可以了,ascii code 46 is DEL:
    var evt = document.createEvent(”KeyboardEvent”);
    evt.initKeyEvent(”keypress”, true, true, null, false, false, false, false, 46, 0);
    elem.dispatchEvent(evt);

    2011年02月20日 06:45 回复 引用

    Rocky

    @断桥残雪
    这个我机器上没有小键盘,没法测试,但是我想应该是可以的,要注意把这个46(virtual input)放到倒数第二个参数上去。

    2011年02月20日 06:50 回复 引用

文明发言,你好我也好
正在提交,请稍后...
返回顶部