Surround Text Function, same button for multiple forms


Ok, I have this function to wrap text. It is probably similar to the one used on this forum; so you highlight some words and hit a button and it inserts the codes before and after.

// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
   // Can a text range be created?
   if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
      var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

      caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

      if (temp_length == 0)
         caretPos.moveStart("character", -text2.length);
         caretPos.moveEnd("character", -text2.length);;
   // Mozilla text range wrap.
   else if (typeof(textarea.selectionStart) != "undefined")
      var begin = textarea.value.substr(0, textarea.selectionStart);
      var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
      var end = textarea.value.substr(textarea.selectionEnd);
      var newCursorPos = textarea.selectionStart;
      var scrollPos = textarea.scrollTop;

      textarea.value = begin + text1 + selection + text2 + end;

      if (textarea.setSelectionRange)
         if (selection.length == 0)
            textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
            textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
      textarea.scrollTop = scrollPos;
   // Just put them on the end, then.
      textarea.value += text1 + text2;
      textarea.focus(textarea.value.length - 1);

And here is an example of the calling function:

<a href="javascript:void(0);" onclick="surroundText('<b>', '</b>', document.form0.definition0); return false;"><img border=0 onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="images/bold.gif" align="bottom" width="23" height="22" alt="Bold" title="Bold" style="background-image: url(images/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>

Now, my problem is. I have to specify the specific form in the webpage. The problem is, this webpage will have multiple forms. I do not want to have to have the same button over and over for each different form box. Is there an easy way to make the function get the form name from the cursor position (as you will obviously be highlighting text, or click in the form box), and that way one button will work for all forms on that page?

I think (most) form elements have the javascript attribute onFocus() and onBlur(). Take a look at those, I think that’s what you’re looking for.

Sponsor our Newsletter | Privacy Policy | Terms of Service