Printable View
Hello all,
I am trying to create a javascript text editor (only to make BOLD and ITALIC). I can't friggin figure out how to get the selected text in a TEXTAREA.
I have found many tutorials on how to get the text that is rendered in HTML but not inside the TEXTAREA (textareas are farts :D).
Can some1 please help me out.
How can I get the selected text from a TEXTAREA?
Thanks in advance,
Loo
It's one of those things where there's no common code for all browsers. IE understands document.selection but Mozilla uses a different syntax involving selectionStart and selectionEnd.
I've only used this kind of functionality once and that was on an application which only had to run in IE so it was straightforward. Have a look at some examples, such as the quick reply box on this very page, and see how they work.
Hi,
Here's a quick example. Try selecting some of the text in the textarea it should (hopefully :)) alert the bit of the text you selected
Tested in IE 6, FF 2 and Opera 9.Code:<html>
<head>
<script type="text/javascript">
onload = function() {
document.getElementById('txt').onmouseup = function() {
if (document.selection) { // for IE
alert(document.selection.createRange().text);
} else if (typeof this.selectionStart != 'undefined') { // for FF, Opera etc...
alert(this.value.substring(this.selectionStart, this.selectionEnd));
} else {
alert('Could not find selection');
}
};
};
</script>
</head>
<body>
<textarea id="txt" rows="10" cols="50">hello! please select me</textarea>
</body>
</html>
Thank you very much for the response.
I was able to find some code as well. Thanks again.. I will study your code a bit... I like how you used the onmouseup.
I ended up doing a copy-paste of:
Code:<script language="javascript">
function goToSection (url){
document.getElementById("section").options.value=document.getElementById("section").options.defaultValue;<!-- I USED TWO LINES OF CODE TO SET THE OPTION TO DEFAULT -->
document.getElementById("section").value="0";<!-- I USED TWO LINES OF CODE TO SET THE OPTION TO DEFAULT -->
location.href = url;
}
<!--
function insert(aTag, eTag) {
var input = document.forms['new_form'].elements['description'];
input.focus();
/* fr Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfgen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* fr neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfgen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* fr die brigen Browser */
else
{
/* Abfrage der Einfgeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfgen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfgen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
//-->
</script>
This function recieves parameters passed from (for example):
I got it from a german site :)Code:<input type="button" value="BOLD" onClick="insert('<b>', '</b>')">
It has some other uses as well.. but i used it to enter BOLDs and ITALICs only.
Thanks again!
Loo