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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值