jQuery - Insert text in textarea

Hi E's, I try to get a solution for insert some text pre-defined inside a textarea.
In practice I get the position of the cursor inside textarea, and in that position I want put the text "this is a test".
I begin this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../ficheiros_apoio/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colocar texto numa determinada posição numa textarea</title>
</head>
<body>
<textarea name="caixa" cols="50" rows="5" id="box" >this is the text. Today was a good day. Hello World!</textarea><br>
<input name="transform" class="transform" type="submit" value="put text - this is a test" />
<script>
$(document).ready(function(){
$(".transform").click(function() {
var texto = $("#box");
var point = texto[0].selectionStart;
var input = "this is a test";
	});
});
</script>
</body>
</html>

Open in new window

How I insert the text into position inside textarea?

The best regards, JC
LVL 4
Pedro ChagasWebmasterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
since you're using jQuery, you may consider using the insertAtCaret plugin:

https://gist.github.com/mathiasbynens/326491

$.fn.insertAtCaret = function(myValue) {
	return this.each(function() {
		var me = this;
		if (document.selection) { // IE
			me.focus();
			sel = document.selection.createRange();
			sel.text = myValue;
			me.focus();
		} else if (me.selectionStart || me.selectionStart == '0') { // Real browsers
			var startPos = me.selectionStart, endPos = me.selectionEnd, scrollTop = me.scrollTop;
			me.value = me.value.substring(0, startPos) + myValue + me.value.substring(endPos, me.value.length);
			me.focus();
			me.selectionStart = startPos + myValue.length;
			me.selectionEnd = startPos + myValue.length;
			me.scrollTop = scrollTop;
		} else {
			me.value += myValue;
			me.focus();
		}
	});
};

Open in new window

0
Pedro ChagasWebmasterAuthor Commented:
Hi @Big Monty, I'm not the best in js or jQuery.
Can you please tel me how I integrate your solution in my code?

~JC
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
not a problem, looks like you're half way there since you're already using jquery :)

put the code above in it's own file and make a reference to it on your page that you're trying to accomplish this on. then change your code to use the function:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="../../ficheiros_apoio/jquery.min.js"></script>

PUT REFERENCE TO THE NAME OF THE JS FILE YOU PUT THE CODE IN HERE

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colocar texto numa determinada posição numa textarea</title>
</head>
<body>
<textarea name="caixa" cols="50" rows="5" id="box" >this is the text. Today was a good day. Hello World!</textarea><br>
<input name="transform" class="transform" type="submit" value="put text - this is a test" />
<script>
$(document).ready(function(){
     $(".transform").click(function() {
         var input = "this is a test";
        $("#box").insertAtCaret( input );
     });
});
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.