Posted By

crutzdesigns on 02/05/11


Tagged

select input jquery highlight cursor position textarea


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

arnouff
rygiel


jQuery Cursor Functions


 / Published in: jQuery
 

Used on <input>'s and <textarea>'s Several jQuery functions for getting the current cursor position and setting the current cursor position. Also allows for selecting text in a certain range.

Usage:

  $("input[name='username']").getCursorPosition();
  $("input[name='username']").setCursorPosition(5);
  $("input[name='username']").getSelection();
  $("input[name='username']").getSelectionStart();
  $("input[name='username']").getSelectionEnd();
  $("input[name='username']").setSelection(4, 20);

  1. /**
  2.  * Cursor Functions
  3.  *
  4.  * Used for setting and getting text cursor position within an input
  5.  * and textarea field. Also used to get and set selection range.
  6.  *
  7.  * @author Branden Cash
  8.  * @email [email protected]
  9.  */
  10.  
  11. (function( $ ){
  12. jQuery.fn.getCursorPosition = function(){
  13. if(this.lengh == 0) return -1;
  14. return $(this).getSelectionStart();
  15. }
  16.  
  17. jQuery.fn.setCursorPosition = function(position){
  18. if(this.lengh == 0) return this;
  19. return $(this).setSelection(position, position);
  20. }
  21.  
  22. jQuery.fn.getSelection = function(){
  23. if(this.lengh == 0) return -1;
  24. var s = $(this).getSelectionStart();
  25. var e = $(this).getSelectionEnd();
  26. return this[0].value.substring(s,e);
  27. }
  28.  
  29. jQuery.fn.getSelectionStart = function(){
  30. if(this.lengh == 0) return -1;
  31. input = this[0];
  32.  
  33. var pos = input.value.length;
  34.  
  35. if (input.createTextRange) {
  36. var r = document.selection.createRange().duplicate();
  37. r.moveEnd('character', input.value.length);
  38. if (r.text == '')
  39. pos = input.value.length;
  40. pos = input.value.lastIndexOf(r.text);
  41. } else if(typeof(input.selectionStart)!="undefined")
  42. pos = input.selectionStart;
  43.  
  44. return pos;
  45. }
  46.  
  47. jQuery.fn.getSelectionEnd = function(){
  48. if(this.lengh == 0) return -1;
  49. input = this[0];
  50.  
  51. var pos = input.value.length;
  52.  
  53. if (input.createTextRange) {
  54. var r = document.selection.createRange().duplicate();
  55. r.moveStart('character', -input.value.length);
  56. if (r.text == '')
  57. pos = input.value.length;
  58. pos = input.value.lastIndexOf(r.text);
  59. } else if(typeof(input.selectionEnd)!="undefined")
  60. pos = input.selectionEnd;
  61.  
  62. return pos;
  63. }
  64.  
  65. jQuery.fn.setSelection = function(selectionStart, selectionEnd) {
  66. if(this.lengh == 0) return this;
  67. input = this[0];
  68.  
  69. if (input.createTextRange) {
  70. var range = input.createTextRange();
  71. range.collapse(true);
  72. range.moveEnd('character', selectionEnd);
  73. range.moveStart('character', selectionStart);
  74. range.select();
  75. } else if (input.setSelectionRange) {
  76. input.focus();
  77. input.setSelectionRange(selectionStart, selectionEnd);
  78. }
  79.  
  80. return this;
  81. }
  82. })( jQuery );

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: pyetrosafe on July 23, 2013

Hello ... Very good code ... I'm using it ...

So. I saw a small bug in your code ...

"if (0 == this.lengh)" The word "length" is misspelled, missing the "T"...

Thank you...

You need to login to post a comment.