[San-Diego-pm] Clipboard

Bill Davidson billdav at cox.net
Tue Mar 8 15:52:51 PST 2005


Joel Fentin wrote:
> One example: There are several websites where I have written 
> administration software for getting the data into databases. These sites 
> are partially or totally in Spanish but the operator might be at an 
> English keyboard.
> 
> One way I handle that is to simply display a label containing 
> "áéíñóúÁÉÍÑÓÚ¡¿". The operator can copy and paste the needed 
> character(s) into active textboxes.
> 
> With VB work (not on the web) I can can set it up so that the operator 
> need only click the character of interest and it is automatically 
> inserted at the location of the text cursor. This, by the way, requires 
> one short line of code.
> 
> So, in attempting the same thing for a web page, I have considered drag 
> & drop and the clipboard. Drag & drop appears to be a real drag if it is 
> to be browser neutral. My searches using the word clipboard got me nowhere.

There I can help you.  Javascript can insert text into form textarea's
easily.  Of course, getting the cursor position is not DOM standard (WTF?!)
and IE has a different extension to do it than Netscape/Mozilla.  :(

Anyway, here's some javascript I wrote (or really rewrote as I started
with something I found on the web that didn't work correctly).  I used
it for a pop-up keyboard I made to do something similar.

For browsers other than Netscape/Mozilla or IE it only appends text
to the textarea.

     // this one is really only for IE.  It stores the cursor position when
     // it is called.  It handles several events in the textarea.
     function storeCursor( textRef )
     {
         if ( textRef.createTextRange ){
             textRef.caretPos = document.selection.createRange().duplicate();
         }
     }

     // This one inserts the given text into the textarea at the current cursor
     // position for IE and Mozilla.  For others, it appends the text to the end.
     // keyRef is a reference to the HTML object that called this routine.
     // text is the text to be added to the textarea.  It should normally be
     // only one unicode character.
     // textId is the HTML id of the textarea being inserted into.
     function insertAtCursor( keyRef, textId ){
         var text = keyRef.innerHTML;
         var textRef = document.getElementById(textId);
         if ( textRef.createTextRange && textRef.caretPos ){
             // this is for IE only
             var cursorPos = textRef.caretPos;
             cursorPos.text = cursorPos.text.charAt(cursorPos.text.length - 1) == ' ' ? text + ' ' : text;
         }else if ( textRef.selectionStart || textRef.selectionStart == '0' ){
             // this is for Mozilla/Netscape
             var startPos = textRef.selectionStart;
             var endPos = textRef.selectionEnd;
             textRef.value = textRef.value.substring(0, startPos) + text + textRef.value.substring(endPos, textRef.value.length);
             textRef.selectionStart = startPos + text.length;
             textRef.selectionEnd = startPos + text.length;
         }else{
             // this is for everyone else.  append text to the end.
             textRef.value += text;
         }
         textRef.focus();
     }

My Perl/CGI script generates a different page based upon wether it thinks
it's working with IE or Netscape/Mozilla (Finally some Perl! :)).  I've
stripped out the stuff that's not necessary to your problem.

First I guess if it's IE:

     my $msie = exists($ENV{HTTP_USER_AGENT}) && $ENV{HTTP_USER_AGENT} =~ /MSIE \d/ ? 1 : 0;

Later I start my textarea tag:

     print "<textarea id=\"inputText\" name=\"inputText\" rows=\"5\" cols=\"80\"";
     if ( $msie ){
         # add event handlers for IE.
         foreach my $event ( qw(onselect onclick onkeyup ondblclick) ){
             print " $event=\"storeCursor(this);\"";
         }
     }
     # finish the opening textarea tag.
     print ">";

I add any current text and then close the tag after that.

My keys were in a table, each cell having a unique ID:

     print "<td id=\"key1234\" onmousedown=\"insertAtCursor(this,'inputText')\">&#1234;</td>\n";

That is, assuming that the character I wanted for that key was &#1234;

--Bill Davidson


More information about the San-Diego-pm mailing list