Talk In Code

If you want to give your users a little snippet of code it is nice to give them the option of selecting the entire block of code without having to highlight the text manually. This can be done with a simple JavaScript button.

Take the following form:

<form name="aForm">
<textarea name="aTextarea" cols="50" rows="20">
Copy this text onto your own website.
</textarea>
</form>


To enable the selection functionality you just need to add in an input button. The click event of this button will be to run a JavaScript bookmarklet that focuses on the textarea in question (in this case it is called aTextarea) and selects the text.

<form name="aForm">
<textarea name="aTextarea" cols="50" rows="20">
Copy this text onto your own website.
</textarea>
<br />
<input type="button" value="Highlight All" onclick="javascript:this.form.aTextarea.focus();this.form.aTextarea.select();" />
</form>


The user can then copy the text as they normally would.

When a user presses the tab key in a browser window the normal action is for the user to move the focus to a different control. To enable a word processor like tab effect in a text area you need to catch the keystroke and add in the tab character to where ever the cursor is. This is the main issue with creating this solution, it is easy to add a tab to the end of the text, but most users might want to add a tab half way through the text.

Take the following HTML text area.

<textarea name="content" class="textarea" id="content" rows="20" cols="65" wrap="on" onKeyDown="return catchTab(this,event)"></textarea>

When a keystroke is detected it runs the catchTab() function. This function detects if the keystroke is 9 (which means it is a tab) and runs the function called replaceSelection() in order to find out where the cursor is and replace the text that exists there.

function catchTab(item,e){
 if(navigator.userAgent.match("Gecko")){
  c=e.which;
 }else{
  c=e.keyCode;
 }
 if(c==9){
  replaceSelection(item,String.fromCharCode(9));
  document.getElementById(item.id).focus();
  return false;
 }
}
 
function setSelectionRange(input, selectionStart, selectionEnd){
 if(input.setSelectionRange){
  input.focus();
  input.setSelectionRange(selectionStart, selectionEnd);
 }else if(input.createTextRange){
  var range = input.createTextRange();
  range.collapse(true);
  range.moveEnd('character', selectionEnd);
  range.moveStart('character', selectionStart);
  range.select();
 }
}
 
function replaceSelection(input, replaceString){
 if(input.setSelectionRange){
  var selectionStart = input.selectionStart;
  var selectionEnd = input.selectionEnd;
  input.value = input.value.substring(0, selectionStart)+ replaceString +   input.value.substring(selectionEnd);
 
  if(selectionStart != selectionEnd){
   setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
  }else{
   setSelectionRange(input, selectionStart + replaceString.length, selectionStart +    replaceString.length);
  }
  }else if(document.selection){
   var range = document.selection.createRange();
 
   if(range.parentElement() == input){
    var isCollapsed = range.text == '';
    range.text = replaceString;
    if(!isCollapsed){
     range.moveStart('character', -replaceString.length);
     range.select();
    }
  }
 }
}

With these functions in action the text area will act a little more like a word processor.