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.  */
  9.  
  10. (function( $ ){
  11. jQuery.fn.getCursorPosition = function(){
  12. if(this.lengh == 0) return -1;
  13. return $(this).getSelectionStart();
  14. }
  15.  
  16. jQuery.fn.setCursorPosition = function(position){
  17. if(this.lengh == 0) return this;
  18. return $(this).setSelection(position, position);
  19. }
  20.  
  21. jQuery.fn.getSelection = function(){
  22. if(this.lengh == 0) return -1;
  23. var s = $(this).getSelectionStart();
  24. var e = $(this).getSelectionEnd();
  25. return this[0].value.substring(s,e);
  26. }
  27.  
  28. jQuery.fn.getSelectionStart = function(){
  29. if(this.lengh == 0) return -1;
  30. input = this[0];
  31.  
  32. var pos = input.value.length;
  33.  
  34. if (input.createTextRange) {
  35. var r = document.selection.createRange().duplicate();
  36. r.moveEnd('character', input.value.length);
  37. if (r.text == '')
  38. pos = input.value.length;
  39. pos = input.value.lastIndexOf(r.text);
  40. } else if(typeof(input.selectionStart)!="undefined")
  41. pos = input.selectionStart;
  42.  
  43. return pos;
  44. }
  45.  
  46. jQuery.fn.getSelectionEnd = function(){
  47. if(this.lengh == 0) return -1;
  48. input = this[0];
  49.  
  50. var pos = input.value.length;
  51.  
  52. if (input.createTextRange) {
  53. var r = document.selection.createRange().duplicate();
  54. r.moveStart('character', -input.value.length);
  55. if (r.text == '')
  56. pos = input.value.length;
  57. pos = input.value.lastIndexOf(r.text);
  58. } else if(typeof(input.selectionEnd)!="undefined")
  59. pos = input.selectionEnd;
  60.  
  61. return pos;
  62. }
  63.  
  64. jQuery.fn.setSelection = function(selectionStart, selectionEnd) {
  65. if(this.lengh == 0) return this;
  66. input = this[0];
  67.  
  68. if (input.createTextRange) {
  69. var range = input.createTextRange();
  70. range.collapse(true);
  71. range.moveEnd('character', selectionEnd);
  72. range.moveStart('character', selectionStart);
  73. range.select();
  74. } else if (input.setSelectionRange) {
  75. input.focus();
  76. input.setSelectionRange(selectionStart, selectionEnd);
  77. }
  78.  
  79. return this;
  80. }
  81. })( 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.