advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

arunpjohny on 02/21/08


Tagged

javascript


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

SpinZ
adix
korzhik
wizard04


Get/set Cursor In Html TextArea

Published in: JavaScript 

URL: http://demo.vishalon.net/getset.htm

I got this code from http://blog.vishalon.net/Post/57.aspx

The actual two methods required are

function doGetCaretPosition (ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); }

function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }

Plain TextExpand 
  1. <html>
  2. 	<head>
  3. <title>Get/Set Caret in Textarea Example</title>
  4. 		<script>
  5. function doGetCaretPosition (ctrl) {
  6.  
  7. 	var CaretPos = 0;
  8. 	// IE Support
  9. 	if (document.selection) {
  10.  
  11. 		ctrl.focus ();
  12. 		var Sel = document.selection.createRange ();
  13.  
  14. 		Sel.moveStart ('character', -ctrl.value.length);
  15.  
  16. 		CaretPos = Sel.text.length;
  17. 	}
  18. 	// Firefox support
  19. 	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
  20. 		CaretPos = ctrl.selectionStart;
  21.  
  22. 	return (CaretPos);
  23.  
  24. }
  25.  
  26.  
  27. function setCaretPosition(ctrl, pos)
  28. {
  29.  
  30. 	if(ctrl.setSelectionRange)
  31. 	{
  32. 		ctrl.focus();
  33. 		ctrl.setSelectionRange(pos,pos);
  34. 	}
  35. 	else if (ctrl.createTextRange) {
  36. 		var range = ctrl.createTextRange();
  37. 		range.collapse(true);
  38. 		range.moveEnd('character', pos);
  39. 		range.moveStart('character', pos);
  40. 		range.select();
  41. 	}
  42. }
  43.  
  44. function process()
  45. {
  46. 	var no = document.getElementById('no').value;
  47. 	setCaretPosition(document.getElementById('get'),no);
  48. }
  49.  
  50. 		</script>
  51. 	</head>
  52. 	<body>
  53. 		<textarea id="get" name="get" rows="5" cols="31">Please write some integer in the textbox given below and press "Set Position" button. Press "Get Position" button to get the position of cursor.</textarea>
  54. 		<br>
  55.  
  56. 		Enter Caret Position: <input type="text" id="no" size="1" /><input type="button" onclick="process();" value="Set Position">
  57. 		<BR>
  58. 		<input type="button" onclick="alert(doGetCaretPosition(document.getElementById('get')));"
  59. 			value="Get Position">
  60. 	</body>
  61. </html>

Report this snippet 

You need to login to post a comment.