[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 767
  • Last Modified:

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
0
Pedro Chagas
Asked:
Pedro Chagas
  • 2
1 Solution
 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now