range.select在IE10上失败,无法正确突出显示文本

时间:2013-10-31 16:06:53

标签: javascript html internet-explorer cross-browser

我有一个应用程序循环通过textarea,搜索特定文本,如果找到则突出显示它,并提示用户是否对找到的文本采取行动。这在IE10之前的所有IE版本上都运行良好(文本突出显示,并提示用户)。

使用IE10时,由于看似CONFIRM提示,range.select将不再突出显示文本。如果删除CONFIRM,则突出显示文本。同样在IE 10上,在最后一个CONFIRM OK之后,当表单返回焦点时,文本的最后一个实例将突出显示。

下面是一个代码片段,可以演示这个,并且可以在IE 5,6,7,8,9下正常工作,但在IE10上会失败。任何有关重新设计或其他代码替代方案的帮助将不胜感激。我只需要在IE环境中工作(内部应用程序,仅限IE使用)。


<html>
<body>

<form name="theForm">
   <textarea name="message" rows="20" cols="80">NAM/JONES  NAM/SMITH   NAM/BROWN</textarea>
</form>

<script>
   var message = document.theForm.message.value.toUpperCase();
   var range = document.theForm.message.createTextRange();

   for (x=0; x<message.length-1; x++) {
      if (message.substr(x,4) == "NAM/") {
         var strFound=range.findText("NAM/");
         if (strFound) range.select();
         range.collapse(false);
         msg = "Process this name?";
         if (confirm(msg)) {
            // use x.substr to extract name, and do something
         }
      }
   }
</script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我有类似的问题,我根据你的问题和我们遇到的有问题的代码做了一个演示

<?xml version="1.0" encoding="ISO-8859-1" ?>
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>

    <form name="theForm">
        <input type="text" id="txt" value="1234567890" />
        <span id="selected" />
    </form>

    <script>
        function selectRange(start, end) {
            var range = document.theForm.txt.createTextRange();
            range.moveStart("character", 0 - end);
            range.moveEnd("character", 0 - end);
            range.select();
            // Und dann den neu hinzugekommenen Teil markieren.
            range.moveStart("character", start);
            range.moveEnd("character", end - start);
            range.select();
        }
        function step(x) {
            if (x >= document.theForm.txt.value.length - 2)
                return;
            selectRange(x, x + 2);
            document.getElementById("selected").innerHTML = document.selection.createRange().text;
            window.setTimeout(function () { step(x + 1); }, 1000);
        }
        step(0);
    </script>

</body>
</html>

结果发现,range.select();setTimeout()内发生时再次发挥作用。

我们最终把我们有问题的功能完全放入了settimeout

this.selectTextRange = function (start, end) {
    window.setTimeout(function() {
        var range = thisControl.textBox.createTextRange();
        // Ganz an den Anfang moven     
        range.moveStart("character", 0 - end);
        range.moveEnd("character", 0 - end);
        range.select();
        // Und dann den neu hinzugekommenen Teil markieren.
        range.moveStart("character", start);
        range.moveEnd("character", end - start);
        range.select();
    }, 0);
};

我希望这会有所帮助。