My Technical Notes

Monday, 18 February 2013

textAreaExtensions jQuery plugin

The following is my textAreaExtensions which we can use to do the following things (let textarea1 be our textarea's id):

  • $('#textarea1').textAreaGetSelection() will grab the currently selected text and other information such as the start, and the length of the selection.
  • $('#textarea1').textAreaReplaceSelection(text) takes a string as input and will replace the selected text with the value provided. e.g. we could use this to surround selected text with a paragraph tag etc.
  • $('#textarea1').textAreaSetSelectionRange(selectionStart, selectionEnd) takes two integer parameters which are for the start and end of the new selection range selects this text. e.g. we could use this to highlight / select the first occurance for a searched-for string.
  • $('#textarea1').textAreaSetCaretPos(pos) takes an integer and sets the carot position to this integer. If we replace text in the text area then we want to set the caret position appropriately so the user knows where he is.

/*
 * jQuery plugin: textAreaExtensions - v0.1.1 - last change: 2013-02-18
 * (c) 2013 Tahir Hassan
 * based on:
 * jQuery plugin: fieldSelection - v0.1.1 - last change: 2006-12-16
 * (c) 2006 Alex Brem <alex@0xab.cd> - http://blog.0xab.cd
 * 
 * stackoveflow answer http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area#answer-499158
 * CMS - 31 Jan 2009
 */
(function($) {
 $.fn.textAreaGetSelection = function() {
  // currently only works in mozilla 
  var textArea = this[0];
  if ('selectionStart' in textArea) {
   var length = textArea.selectionEnd - textArea.selectionStart;
   
   return {
    start: textArea.selectionStart,
    end: textArea.selectionEnd,
    length: length,
    text: textArea.value.substr(textArea.selectionStart, length)
   };
  } else if ($.browser.msie) { 
   // IE does not work properly because it ignores whitespace / multiple new-lines at the end
   textArea.focus();
   var range = document.selection.createRange();
   if (range === null) {
    return { start: 0, end: textArea.value.length, length: 0 }
   }
   
   var re = textArea.createTextRange();
   var rc = re.duplicate();
   re.moveToBookmark(range.getBookmark());
   rc.setEndPoint('EndToStart', re);

   return { 
    start: rc.text.length, 
    end: rc.text.length + range.text.length, 
    length: range.text.length, 
    text: range.text 
   };
  }
 };
 
 $.fn.textAreaReplaceSelection = function(text) {
  var selection = this.textAreaGetSelection();
  var origVal = this.val();
  var newVal = origVal.slice(0, selection.start) + text + origVal.slice(selection.end);
  this.val(newVal);
 }
 
 $.fn.textAreaSetSelectionRange = function(selectionStart, selectionEnd) {
  var textArea = this[0];
  
  if (textArea.setSelectionRange) {
   textArea.focus();
   textArea.setSelectionRange(selectionStart, selectionEnd);
  } else if (textArea.createTextRange) {
   var range = textArea.createTextRange();
   range.collapse(true);
   range.moveEnd('character', selectionEnd);
   range.moveStart('character', selectionStart);
   range.select();
  }
 };
 
 $.fn.textAreaSetCaretPos = function(pos) {
  this.textAreaSetSelectionRange(pos, pos);
 };

})(jQuery);

TODOAdd a download link to the script and a sample file

No comments: