IE下未选择textarea的内容时如何保存Range对象

  由于IE下调用obj.focus()并不能使光标回到原来的位置或者使选择的内容再次选择上,所以在IE浏览器下需要保存当前的Range对象,以便进行相应的操作时,在原来的位置进行,而不是跑到其他的位置去。


  Firefox由于调用obj.focus()后光标能回到回来的位置或者选择的文字上,所以不需要保存位置。


  但是在不久前在写一个UBB程序时,碰到如果未选择textarea里面的内容,但是光标在textarea里面,IE竟然保存到的Range对象是document.body的,而不是textarea里面。⊙﹏⊙b汗


  如下,注意下面js代码仅在IE浏览器下能运行,Firefox的兼容性不判断。


<input type="button" onclick="SaveRange()" value="IE下保存Range对象" onfocus="this.blur()" />
<textarea id="txt">11111111111111</textarea>
<script type="text/javascript">
var rng;
function SaveRange(){
  var txt=document.getElementById('txt');
  rng=document.selection.createRange();
  alert(rng.parentElement().tagName)//如果未选择textarea里面的内容但是光标在textarea里面时,输出BODY,而选择了内容时,输出的为TEXTAREA
  rng.select();//使光标回到原来的位置,同上一样,未选择内容回不到原来位置并且textarea获取不到光标,选择了后可以选择上原来的内容
}
</script> 
  

  这个问题困扰了一段时间,郁闷~~后面参考了下csdn的ubb编辑器后发现了一句很重要的代码,就是在保存Range前调用textarea.focus(),这样就能保存了。如下

  <input type="button" onclick="SaveRange()" value="IE下保存Range对象" onfocus="this.blur()" />
<textarea id="txt">11111111111111</textarea>
<script type="text/javascript">
var rng;
function SaveRange(){
  var txt=document.getElementById('txt');
  txt.focus();//调用focus事件再保存Range,至于为什么有点弄不清楚,不过代码正常运行就ok了。
  rng=document.selection.createRange();
  alert(rng.parentElement().tagName)//无论是否选择了内容,都输出textarea
  rng.select();//无论是否选择了内容,都能使光标回到原来的位置
}
</script>

加支付宝好友偷能量挖...


原创文章,转载请注明出处:IE下未选择textarea的内容时如何保存Range对象

评论(0)Web开发网
阅读(191)喜欢(0)JavaScript/Ajax开发技巧