[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')\">Ӓ</td>\n";
That is, assuming that the character I wanted for that key was Ӓ
--Bill Davidson
More information about the San-Diego-pm
mailing list