I was trying make a simple ubb editor, but document.selection.createRange() does not work in IE and it just won't get any highlighted text(try to alert the highlighted text yet get nothing). I am still not able to find the reason and solve this.
You can have a look at this script in action here
window.onload = function () {
var ubb = document.getElementById('ubb_code');
var ubba = ubb.getElementsByTagName('a');//ubb buttons
var textarea = document.getElementsByTagName('textarea')[0];//editable textarea filed
//onclick to insert ubbcode
ubba[0].onclick = function() {
tag('[b]','[/b]');
};
//function used to insert ubbcode
function tag(tag1,tag2){
// code for IE
if (document.selection){
textarea.focus();
var sel = textarea.document.selection.createRange();//It DOES NOT work!
//alert(sel.text);
sel.text = tag1 + sel.text + tag2;
}else{
// code for none-IE webbrowsers
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;
var sel = textarea.value.substring(start, end);
//alert(sel);
var rep = tag1 + sel + tag2;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
textarea.scrollTop = scrollTop;
textarea.scrollLeft = scrollLeft;
}
}
I was trying make a simple ubb editor, but document.selection.createRange() does not work in IE and it just won't get any highlighted text(try to alert the highlighted text yet get nothing). I am still not able to find the reason and solve this.
You can have a look at this script in action here
window.onload = function () {
var ubb = document.getElementById('ubb_code');
var ubba = ubb.getElementsByTagName('a');//ubb buttons
var textarea = document.getElementsByTagName('textarea')[0];//editable textarea filed
//onclick to insert ubbcode
ubba[0].onclick = function() {
tag('[b]','[/b]');
};
//function used to insert ubbcode
function tag(tag1,tag2){
// code for IE
if (document.selection){
textarea.focus();
var sel = textarea.document.selection.createRange();//It DOES NOT work!
//alert(sel.text);
sel.text = tag1 + sel.text + tag2;
}else{
// code for none-IE webbrowsers
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;
var sel = textarea.value.substring(start, end);
//alert(sel);
var rep = tag1 + sel + tag2;
textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
textarea.scrollTop = scrollTop;
textarea.scrollLeft = scrollLeft;
}
}
Share
Improve this question
edited Sep 18, 2017 at 14:33
halfer
20.3k19 gold badges109 silver badges202 bronze badges
asked Apr 26, 2012 at 3:21
marcelmarcel
771 gold badge4 silver badges17 bronze badges
1
- 1 if you use document.selection.createRange() for IE and want to keep the highlighted text when you trigger some function, use onmousedown instead of onclick, cause onclick will destroy selection in IE! – marcel Commented Apr 26, 2012 at 5:40
2 Answers
Reset to default 1Update : IE9 supports this functionality
http://msdn.microsoft./en-us/library/ie/ms536394(v=vs.85).aspx
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange();
var selText = range.text;
var htmltext = range.htmlText;
}
In IE11,selection object is no more supported. you can use window.getSelection to achieve the same behaviour. For more info please refer http://msdn.microsoft./en-us/library/ie/ms535869(v=vs.85).aspx