IE中textarea光标丢失问题及解决方法

最新推荐文章于 2023-04-20 16:10:06 发布

原创最新推荐文章于 2023-04-20 16:10:06 发布 · 760 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #iframe #firefox #function #浏览器 #null

本文介绍了在IE浏览器中解决textarea光标位置丢失的问题。通过在textarea的mouse和key事件中保存当前光标位置，并在窗口关闭时进行还原，特别针对光标位于文本结尾的情况进行了额外处理。

首先，让我对IE浏览器致以最热烈的问候：我次奥~

当页面上内嵌了iframe，同时此iframe中还内嵌了iframe，弹出窗口后，原来textarea中编辑的光标位置就会丢失。在chorme和firefox下不会出现此问题。

解决方法：在textarea的mouse和key事件中保存当前光标位置，然后在窗口关闭时还原。

1.保存光标位置

<textarea name="tbintro" rows="2" cols="20" id="tbintro" onmouseup="saverange(this);" onKeyUp="saverange(this);“>

var ieSelectionBookmark;
function saverange(obj)
{
    var range = document.selection.createRange();   
    ieSelectionBookmark = range.getBookmark();
}

2.还原

    if(ieSelectionBookmark){
        var range = document.selection.createRange();
        range.moveToBookmark(ieSelectionBookmark);
        range.select();
        ieSelectionBookmark = null;
    }

你以为这样就完了么？。。。更坑爹的是，测试发现，光标在文本中时能正常复位，但是如果在结尾，则还原后光标跑到textarea开头了。

原因一直没找到，只能用一个比较笨的方法来解决：在保存光标时同时记录是不是在结尾。然后在关闭窗口时根据这个记录来做相应处理。

var isEnd;
var ieSelectionBookmark;
function saverange(obj)
{
    var range = document.selection.createRange();   
    ieSelectionBookmark = range.getBookmark();
    getCaretPos(obj);
}

function getCaretPos(obj){ 
    obj.focus();
    var allRange = document.body.createTextRange();
    allRange.moveToElementText(obj);
    
    var workRange = document.selection.createRange();
    workRange.setEndPoint("StartToStart",allRange); 
    
    len=workRange.text.length; 
    if (len >= obj.value.length) 
        isEnd = true;
    else
        isEnd = false;
}