how to get the selected value in textbox and change its value? how to do it in javascript?
This is what i am after. I was working on a bbcode editor and i wanted to get the the selected text in the textarea and wanted to insert bbcode tags in place of them. I needed just very simple javascript code an finally i found a solution working in both IE and Firefox.
// code for IE
var textarea = document.getElementById("textarea");
if (document.selection)
{
textarea.focus();
var sel = document.selection.createRange();
// alert the selected text in textarea
alert(sel.text);
// Finally replace the value of the selected text with this new replacement one
sel.text = '<b>' + sel.text + '</b>';
}
The above code only works in IE versions. You will need a different javascript code that works in Firefox. The document.selection will be true if it is IE else it would return false.
In Mozilla, you have to first get the length, starting point of cursor and ending point of highlighted cursor. While doing replacement you have first output the textarea value from substr(0,Startingpoint) + replacement + substr(Startingpoint,Length). This is the trick to change or replace the selected text in the textarea.
// code for Mozilla
var textarea = document.getElementById("textarea");
var len = textarea.value.length;
var start = textarea.selectionStart;
var end = textarea.selectionEnd;
var sel = textarea.value.substring(start, end);
// This is the selected text and alert it
alert(sel);
var replace = '<b>' + sel + '<b>';
// Here we are replacing the selected text with this one
textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
Just thought that i could share my little work in my blog.
Similar Posts:
- Fix -> Caret/Cursor jumps to start of textarea in javascript
- iframe innerHTML value from textarea
- how to hide textarea?
- How to use LOAD DATA INFILE to import fixed width data in MySQL
- Lightweight PHP WYSIWYG HTML Editor
- A Simple WYSIWYG Editor in Javascript
- How to import text data in mysql with spaces?
- Best Free Web based WYSIWYG html editors
- Free Markup TextArea HTML Editor in Javascript
- How to insert HTML/BBcode tags to WordPress Comments Form
November 5, 2008
So your code “works” in that it updates the value of my text field. What it does NOT do is actually make the text bold (in a standard textarea). Is it possible to format only a portion of the text in a standard textarea field? By format I mean make it bold, or color the text or something?
November 5, 2008
That is the problem with textarea. It does not support rich text formatting. You have to use iframe make it bold or other formatting.
January 6, 2010
Het there, I think you’ll call me god when you’ll see this create a free flash website
March 12, 2010
Thanks, dude. It has solved the problem that I’m tackling with tiring several continous hours of work. It didn’t work out first, but then I found out that I made misspelling in code (you know after many hours of work, our performance lowers). then it worked out wonderfully. thanks again.
June 3, 2010
function get_selection(the_id)
{
var e = document.getElementById(the_id);
//Mozilla and DOM 3.0
if(‘selectionStart’ in e)
{
var l = e.selectionEnd – e.selectionStart;
return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
}
//IE
else if(document.selection)
{
e.focus();
var r = document.selection.createRange();
var tr = e.createTextRange();
var tr2 = tr.duplicate();
tr2.moveToBookmark(r.getBookmark());
tr.setEndPoint(‘EndToStart’,tr2);
if (r == null || tr == null) return { start: e.value.length, end: e.value.length, length: 0, text: ” };
var text_part = r.text.replace(/[\r\n]/g,’.'); //for some reason IE doesn’t always count the \n and \r in the length
var text_whole = e.value.replace(/[\r\n]/g,’.');
var the_start = text_whole.indexOf(text_part,tr.text.length);
return { start: the_start, end: the_start + text_part.length, length: text_part.length, text: r.text };
}
//Browser not supported
else return { start: e.value.length, end: e.value.length, length: 0, text: ” };
}
function replace_selection(the_id,replace_str)
{
var e = document.getElementById(the_id);
selection = get_selection(the_id);
var start_pos = selection.start;
var end_pos = start_pos + replace_str.length;
e.value = e.value.substr(0, start_pos) + replace_str + e.value.substr(selection.end, e.value.length);
set_selection(the_id,start_pos,end_pos);
return {start: start_pos, end: end_pos, length: replace_str.length, text: replace_str};
}
function set_selection(the_id,start_pos,end_pos)
{
var e = document.getElementById(the_id);
//Mozilla and DOM 3.0
if(‘selectionStart’ in e)
{
e.focus();
e.selectionStart = start_pos;
e.selectionEnd = end_pos;
}
//IE
else if(document.selection)
{
e.focus();
var tr = e.createTextRange();
//Fix IE from counting the newline characters as two seperate characters
var stop_it = start_pos;
for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) start_pos = start_pos – .5;
stop_it = end_pos;
for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) end_pos = end_pos – .5;
tr.moveEnd('textedit',-1);
tr.moveStart('character',start_pos);
tr.moveEnd('character',end_pos – start_pos);
tr.select();
}
return get_selection(the_id);
}
function wrap_selection(the_id, left_str, right_str, sel_offset, sel_length)
{
var the_sel_text = get_selection(the_id).text;
var selection = replace_selection(the_id, left_str + the_sel_text + right_str );
if(sel_offset !== undefined && sel_length !== undefined) selection = set_selection(the_id, selection.start + sel_offset, selection.start + sel_offset + sel_length);
else if(the_sel_text == '') selection = set_selection(the_id, selection.start + left_str.length, selection.start + left_str.length);
return selection;
}
//Your welcome everyone
August 18, 2010
pbu, thank you, works very good!
October 20, 2010
Hi, stephen andrew carter, what is your function supposed to do? cam it be used to find the character position of a selection inside a DIV instead of a textarea?
October 27, 2010
working like a charm
February 11, 2011
Wow.. This browser situation gets more and more annoying for every problem I get. Good advice though – I just wish there was one solution and not 3.
June 26, 2011
Stephen Andrew Carter, Your code works like charm!