range.select fails on IE10 to properly highlight text
Question
I have an application that loops thru a textarea, searching for specific text, highlighting it if found, and prompting the user whether to act upon the found text. This has worked fine on all versions of IE prior to IE10 (the text is highlighted, and the user is prompted).
With IE10, the range.select will no longer highlight the text, due to what appears to be the CONFIRM prompt. If CONFIRM is removed, the text is highlighted. Also on IE 10, after the last CONFIRM is OK'd, the last instance of the text is then highlighted when the form returns to focus.
Below is a code snippet that will work demonstrate this, and will work fine under IE 5, 6, 7, 8, 9, but will fail on IE10. Any help on redesigning or other code alternatives would be greatly appreciated. I ONLY need this to work in the IE environment (internal application, limited to IE only use).
<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 answers
solution1
0 2013-11-20 11:30:35
I had simmilar problems and i made a demo based on yours and the problematic code we had
<?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>
it turned out that range.select(); works again when its happening inside a setTimeout() .
we ended up putting our problematic function into a settimeout completely
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);
};
i hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.