Type one thing, get another [Archive]

jordonk

11-15-2002, 10:23 PM

I know very little JavaScript (I can modify a script slightly, but I can't write one), so I am asking for your help. I want to place a textarea on a web page. This textarea would have attributes to make it so that if you pressed "i", it would come out as "c", or if you pressed "]" it would appear as "=", and so on. (If you're wondering, I want to make it work like the Dvorak keyboard layout). I also would like a button to copy the text in the textarea to the clipboard.

Thank you in advance for your help!

Jordon

whammy

11-16-2002, 02:45 AM

I'm not clear on the Dvorak keyboard layout, but you should be aware that what you're trying to do will only work in Microsoft's Internet Explorer, since you can't copy to the clipboard using any other browser as far as I know.

As far as changing the character typed, that IS doable with javascript, but you can't copy it to the clipboard unless you're using IE.

Can you explain further on the layout, aims, etc. if you're still trying this? I would personally give it up as a good idea that isn't supported client-side though, or use a server-side solution such as PHP or ASP. :)

jordonk

11-16-2002, 03:05 AM

The Dvorak keyboard layout is an alternate key arrangement designed for increased efficiency. See http://www.angelfire.com/fl4/superbuddies/dvorak for more information (but beware the pop-up ads).

I'm trying to work on a page where you can type with the Dvorak layout without having to switch the software on your computer (which isn't that hard anyway, but if you're using a computer where you're not allowed to tweak the settings, this page will be helpful).

You type in the textarea using your Dvorak keyboard skills, but still using the QWERTY layout. If you typed "Jdpps ,soph!", for example, the JavaScript would catch each character before being displayed and convert it to the right letter, thus coming out as "Hello world!"

The "Copy" button is not really a necessity; I just thought it would be a cool little extra. If it's not cross-browser compatible, I just won't employ it.

Thank you for your interest and help!

whammy

11-16-2002, 03:13 AM

Hmm, that should be rather simple then, but you'll have to have a 2D array (or at the very least two related arrays), with the corresponding characters.

I know how to do them in javascript but I don't have the time at the moment. All you should have to do is capture the character, and then change it to the corresponding "Dvorak" character (I think).

That sounds easy but javascript is a PITA when it comes to that sort of thing. :(

Look up "charFromCharCode()" on google, I think that will help you accomplish this.

jordonk

11-16-2002, 03:23 AM

I tried searching charFromCharCode on a whole bunch of search engines and never got more than one hit from each. :( Anyone want to take it upon themselves to just come up with a basic script, please? I think I could manipulate it enough if it was really short (like one line of 'i'='c' or 'x'='q' or whatever would be, instead of for every letter).

whammy

11-16-2002, 03:27 AM

I might give it a shot tomorrow. :)

joh6nn

11-16-2002, 04:25 AM

i think whammy meant String.fromCharCode() . looking for that should turn up more results.

whammy

11-16-2002, 04:42 PM

Oops, you're right. I haven't had time to mess with it much, perhaps someone can do something with this:

var QWERTY = new Array("-","=","_","+","q","w","e","r","t","y","u","i","o","p","[","]","s","d","f","g","h","j","k","l",";","'","z","x","c","v","b","n","m",",",".","/","Q","W","E","R","T","Y","U","I","O","P","{","}","S","D","F","G","H","J","K","L",":","\"","Z","X","C","V","B","N","M","<",">","?");
var DVORAK = new Array("[","]","{","}","'",",",".","p","y","f","g","c","r","l","/","=","o","e","u","i","d","h","t","n","s","-",";","q","j","k","x","b","m","w","v","z","\"","<",">","P","Y","F","G","C","R","L","?","+","O","E","U","I","D","T","H","N","S","_",":","Q","J","K","X","B","M","W","V","Z");

chrismiceli

11-16-2002, 05:04 PM

i guess you could do this.

<script>
var QWERTY = new Array("-","=","_","+","q","w","e","r","t","y","u","i","o","p","[","]","s","d","f","g","h","j","k","l",";","'","z","x","c","v","b","n","m",",",".","/","Q","W","E","R","T","Y","U","I","O","P","{","}","S","D","F","G","H","J","K","L",":","\"","Z","X","C","V","B","N","M","<",">","?");
var DVORAK = new Array("[","]","{","}","'",",",".","p","y","f","g","c","r","l","/","=","o","e","u","i","d","h","t","n","s","-",";","q","j","k","x","b","m","w","v","z","\"","<",">","P","Y","F","G","C","R","L","?","+","O","E","U","I","D","T","H","N","S","_",":","Q","J","K","X","B","M","W","V","Z");
//thanx whammy
function valid() {
document.forms[0].inp.value = one;
one.split();
two = one.length
QWERTY.indexOf(one[two]) = three;
document.forms[0].outp.value += DVORAK[three];
}
</script>
<input type="text" name="inp"><br>
<input type="text" name="outp">

<edit>I tried the code, but it didn't work, any suggestions</edit>

joh6nn

11-16-2002, 06:26 PM

here's a start. it's still buggy, if someone wants to play with it.

<html>
<script>
var qwerty = "-=qwertyuiop[]asdfghjkl;'zxcvbnm,./";
var QWERTY = "_+QWERTYUIOP{}ASDFGHJKL:\"ZXCVBNM<>?";
var dvorak = "[]',.pyfgcrl/=oeuidhtns-;qjkxbmwvz";
var DVORAK = "{}\"<>PYFGCRL?+OEUIDTHNS_:QJKXBMWVZ";

// special thanks to Dave.
function chkKey(evt) {
var mykey, alt, ctrl, shift, dvorakKey;
if (document.all) {
mykey = event.keyCode;
shift = event.shiftKey;
}
else {
mykey = evt.which;
shift = (evt.modifiers & Event.SHIFT_MASK) ? true : false;
}
if ((mykey >= 65) || (mykey <= 90)) {
if (shift == true) {
dvorakKey = QWERTY.indexOf(String.fromCharCode(mykey));
dvorakKey = DVORAK.charAt(dvorakKey);
}
else {
dvorakKey = qwerty.indexOf(String.fromCharCode(mykey).toLowerCase());
dvorakKey = dvorak.charAt(dvorakKey);
}
document.FORMNAME.INPUTNAME.value += dvorakKey;
return false;
}
return true;
}

</script>

<form name="FORMNAME">
<textarea name="INPUTNAME" onkeydown="return chkKey(event);"></textarea>
</form>
</html>

jordonk

11-16-2002, 08:17 PM

Thanks. The page with the script is at http://www.angelfire.com/fl4/superbuddies/dvorak/dvorak.html but it's still not ready for prime time. In particular, many of the keys (numbers, Backspace, Enter, etc.), including some that are specified in the script, do not work. But thanks for your help so far!

Can anyone work on this script a little further, to give all the keys functionality?

whammy

11-16-2002, 09:11 PM

Dang, I almost got it to work but it wouldn't recognize ,./ ...

whammy

11-16-2002, 10:16 PM

Hmm, try this and lemme know what you think. I modified John's script a bit. It's just about there, although I don't write the most elegant javascript ;) But it seems like it's working.

Don't get me wrong, but there's NO way I'm learning the Dvorak setup personally though - I've been typing for about 14 years using QWERTY, and I'm even used to typing code characters without looking. :)

<html>
<script type="text/javascript">

</script>

<form id="dvorakform" action="javascript://">
<textarea cols="50" rows="4" name="INPUTNAME" onkeydown="return chkKey(event,this);"></textarea>
</form>
<img src="dvorak.gif" />
</html>

Don't use this, I changed it to use the switch() statement in the latest post.

joh6nn

11-16-2002, 10:33 PM

whammy, suggestion:

swirth (mykey){
case 186:
f.value += (shift == true) ? "S" : "s";
return false;
break; //just because i'm a hardnose
case 187:
f.value += (shift == true) ? "}" : "]";
return false;
break;
....
}

whammy

11-16-2002, 10:37 PM

Yeah, actually I was just about to change it all using switch() (not swirth(), hehe) to cut down on the code a bit.

But I wanted to make sure it was working first. :)

Great minds think alike.

whammy

11-16-2002, 10:49 PM

And, here it is (in valid XHTML 1.1, of course ;)):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>The Dvorak Keyboard Layout</title>
<script type="text/javascript">

</script>
</head>
<body>
<form id="dvorakform" action="javascript://">
<div style="text-align: center"><textarea cols="50" rows="4" name="tarea" onkeydown="return chkKey(event,this)"></textarea></div>
<div style="text-align: center"><br /><br /><img src="dvorak.gif" alt="" /></div>
</form>
</body>
</html>

:D

chrismiceli

11-17-2002, 12:22 AM

why don't you minus the qwerty key after it is hit, like this

...
function chkKey(evt,f){
document.forms[0].elements[0].length = document.forms[0].elements[0].lenght - 1;
....

i also think this would be a nice post on the "post a javascript" forums.

whammy

11-17-2002, 12:45 AM

I'm not sure what you're getting at, actually. If you change the length like that, then you'd always chop off the last letter, so nothing would be typed :confused: - not to mention it's using the event.keyCode, the length of the textarea isn't used anywhere... :)

I guess someone could move this script there if it's cool, it's kind of a combined effort though (mostly John's code, I just tweaked it a bit to recognize some of the funky keys), and can probably still be improved somewhat - but at least it works (haven't tested it in anything but IE 5.5 though).

doni

11-17-2002, 12:46 AM

Isn't there some kind of function in JS that will return the ascii code for a specified character as a number?

If so why not

var DVORAK = new Array("[","]","{","}","'",",",".","p","y","f","g","c","r","l","/","=","o","e","u","i","d","h","t","n","s","-",";","q","j","k","x","b","m","w","v","z","\"","<",">","P","Y","F","G","C","R","L","?","+","O","E","U","I","D","T","H","N","S","_",":","Q","J","K","X","B","M","W","V","Z");

charNum = get_ascii(character)
dvorak[charNum]

This just seems a little simpler.

whammy

11-17-2002, 12:49 AM

I had originally tried to code it somewhat like that (and it was a bit problematic).

John's idea works better for me, and I for one think his way is a little simpler.

One thing about doing it that way, is each time you pressed the key, you'd have to loop through the entire length of the textarea, and match each character to its Dvorak counterpart whilst in another nested loop. (Someone correct me if I'm wrong, but usually you have to do that with an array).

That would definitely be slower. :D

doni

11-17-2002, 01:04 AM

What I was asking was is there a function that will return a number which represents the charater for example, getascii("C"). Would that return 3 or something like that?

If so, aren't you checking one character at a time above?

If both of these answers are "yes", then couldn't you just place whatever character replaces the "C" in the third position of the array and dvorak[getascii("C")] would return that character?

I've done programming in other languages and this is something like the way I would've done it there. I just thought that this way you wouldn't have to compare one array to another with all those switches.

Don't mind me--I'm still learning java and I find that the best way to learn is to ask questions. I don't profess to be anywhere near an expert on this subject.

whammy

11-17-2002, 01:06 AM

Actually that's what the

String.fromCharCode(mykey)

does, kind of - but it doesn't work with any of the keys I used the switch() statement on - since we're only concerned at the moment about which key was pressed.

Offhand I don't see any way to shorten it, but javascript really isn't my forte either. I just dabble in it. I'm sure there's another way to do it similar to what you're talking about, which is the original approach I tried, but I wasn't having any luck with it, personally. :)

jordonk

11-17-2002, 01:47 AM

Okay, so what version of the script should I use?

whammy

11-17-2002, 01:49 AM

Try the one at the top of this page (actually the last two work, but the second one is less script)... or here, I uploaded it to avoid confusion:

http://www.solidscripts.com/dvorak.htm

:)

P.S. Let me know what you think... and kudos to John, he did much of it, I mostly worked out the bugs.

P.P.S. I just modified it to allow you to paste, and I also tested it in Netscape - with very bad results. Looks like this is only going to work in IE.

I'm sure there's a better way to do this, I'll try again when I get a chance.

joh6nn

11-17-2002, 02:04 AM

doni, because this is supposed to be happening as the keys are typed, that doesn't work. if there were separate keycodes for lowercase and capital letters, it might, but there aren't; instead, there's the shift modifier. so instead of being able to match values against those in an array, you need to check for the shift modifier, and match for values in one of two arrays, based on whether or not shift was pressed. ( ie, match against the QWERTY array if shift was pressed, match against the qwerty array, if it wasn't ).

also, your method assumes that the dvorak array be arranged in the order of the ascii numeration. that's doable, but it'd be a pain in the butt.

and just to make sure there's credit where credit is due, the larger part of the code i used, came from Dave Clark. hence the comment in the code.

whammy

11-17-2002, 02:06 AM

You should try out the script in Mozilla. Pretty bad results... :eek:

I'll take another shot at my original idea tomorrow perhaps. I had part of it working...

doni

11-17-2002, 02:19 AM

John,

Thanks for answering that--every little bit helps in this task of learning JS.

joh6nn

11-17-2002, 02:21 AM

just tested this in mozilla; it seems to be ignoring the "return false;" for the onkeydown event. that is, it adds the dvorak key, and then also adds the qwerty key. not sure how to fix this.

<edit> jkd suggests we use event.preventDefault() for Mozilla. i'll take his word for it. </edit>

jordonk

11-17-2002, 03:18 AM

Thank you all for your help! Here's the finished page: http://www.angelfire.com/fl4/superbuddies/dvorak/dvorak.html

And, my main Dvorak page...
http://www.angelfire.com/fl4/superbuddies/dvorak

There's nothing like the satisfaction of a script well done.

chrismiceli

11-17-2002, 03:40 AM

what is was suggesting is taking off the qwerty lett so that it is just the dvorak letters, instead of both of the qwerty and dvorak put into the textarea.

chrismiceli

11-17-2002, 04:59 AM

what is not cross browser about it?? works in mozilla. the only thing i don't like is it still types the qwerty letter and the dvorak letter.

whammy

11-17-2002, 05:00 AM

Yeah, that's the problem. I almost have it licked, too - using an entirely different technique. :)

whammy

11-17-2002, 05:18 AM

Hmm, this almost works better (and it should be more cross-browser), but can anyone figure out how to modify this so it still works fast, but you don't have to hit the space bar to convert the last letter typed? :)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>QWERTY - Dvorak</title>
</head>
<script type="text/javascript">

</script>
<body>
<form id="typingform" action="qwerty2dvorak.htm">
<div>
<textarea name="typingarea" cols="40" rows="5"
onkeydown="this.value = this.value.substring(0,this.value.length-1) + QtoD(this.value.slice(this.value.length-1,this.value.length))" /></textarea>
</div>
</form>
</body>
</html>

P.S. Doni, does this look more like the approach you were thinking of? This was my original idea... almost working :rolleyes:

randomfactorink

05-06-2010, 10:04 PM

Heh, I guess I missed the link to the finished page...
Meh. I'll post this anyway...
...I make really inefficient code, compared to the last one... and I only tested it in Chrome...

<!DOCTYPE html>

<html>
<head>
<title>Dvorak3r dev</title>
<h3>Dvorak3r lets you type Dvorak on QWERTY... or at least it's supposed to.</h3>
<style type="text/css">
*
{
text-family: Calibri, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<form name="exch">
<p>Type and click 'convert' to change to Dvorak in this box.</p>
<textarea name="qinput" rows="8" cols="64"></textarea><br />
<input type="button" value="Convert" onclick="exchange(document.exch.qinput,document.exch.doutput);foo=document.exch.qinput.focus();"><br />
<textarea name="doutput" rows="8" cols="64"></textarea><br />
<p>Instaput(unR) Instant Dvorak Emulator allows you to emulate Dvorak in real time.</p>
<textarea name="instaput" rows="8" cols="64" onkeydown="return instaputit(event, this);" onkeyup="checkshift(event)"></textarea>
</form>
<script type="text/javascript" lang="JavaScript">
var dvor = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16, 17, 18, 19, 20, 21, 22, 23, 24, 25,26, 27, 28,29,30,31,32, 33,95,35,36,37,38,45,40,41,42,125,119,91,118,122,48,49,50,51,52,53,54,55,56,57,83,115,87,93,86,90,64 ,65,88,74,69,62,85,73,68,67,72,84,78,77,66,82,76,34,80,79,89,71,75,60,81,70,58,47,92,61,94,123,96,97 ,120,106,101,46, 117,105,100,99, 104,116,110,109,98, 114,108,39, 112,111,121,103,107,44, 113,102,59, 63, 124,43, 126,127]; // Whew!!!
// 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 // Screw this keyboard layout lock-in on public terminals.
// qwerty NULL SOH STX ETX EOT ENQ ACK BEL BS TAB LF VT FF CR SO SI DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC FS GS RS US Space ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ DEL // I love Dvorak.
// dvorak NULL SOH STX ETX EOT ENQ ACK BEL BS TAB LF VT FF CR SO SI DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC FS GS RS US Space ! _ # $ % & - ( ) * } w [ v z 0 1 2 3 4 5 6 7 8 9 S s W ] V Z @ A X J E > U I D C H T N M B R L " P O Y G K < Q F : / \ = ^ { ` a x j e . u i d c h t n m b r l ' p o y g k , q f ; ? | + ~ DEL // Bill Gates can go suck Internet Explorer.

var qwerty = "-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./ ";
var QWERTY = '_+QWERTYUIOP{}|ASDFGHJKL:"ZXCVBNM<>? ';
var dvorak = "[]',.pyfgcrl/=\\aoeuidhtns-;qjkxbmwvz ";
var DVORAK = '{}"<>PYFGCRL?+|AOEUIDHTNS_:QJKXBMWVZ ';
var shift; // for instaput

function exchange(input,output)
{
excin = input.value;
excout = "";
for(pos=0;pos<excin.length;pos++)
{
excout += String.fromCharCode(dvor[ascii(excin.substr(pos,1))]);
}
output.value = excout;
}

function checkcompute(evt)
{
if (document.all)
{
mykey = event.keyCode;
}
else
{
mykey = evt.which;
}
if (mykey==13&&shift)
{
exchange(document.exch.qinput,document.exch.doutput);
foo=document.exch.qinput.focus();
return false;
}
}

function instaputit(evt, out)
{
if (document.all)
{
mykey = event.keyCode;
}
else
{
mykey = evt.which;
}

if (mykey==16)
{
shift=true;
return false;
}

if (mykey==32)
{
dvorakKey = " ";
}

if (mykey==13)
{
dvorakKey = "\n";
}

if (mykey==8)
{
out.value = out.value.substr(0,out.value.length-1)
return false;
}

// main char processing
if (shift) {
dvorakKey = QWERTY.indexOf(String.fromCharCode(mykey));
dvorakKey = DVORAK.charAt(dvorakKey);
}
else {
dvorakKey = qwerty.indexOf(String.fromCharCode(mykey).toLowerCase());
dvorakKey = dvorak.charAt(dvorakKey);
}

// extended punctuation processing
if (!dvorakKey)
{
if (shift)
{
switch (mykey)
{
case 48:
dvorakKey = ")";
break;
case 49:
dvorakKey = "!";
break;
case 50:
dvorakKey = "@";
break;
case 51:
dvorakKey = "#";
break;
case 52:
dvorakKey = "$";
break;
case 53:
dvorakKey = "%";
break;
case 54:
dvorakKey = "^";
break;
case 55:
dvorakKey = "&";
break;
case 56:
dvorakKey = "*";
break;
case 57:
dvorakKey = "(";
break;
case 186:
dvorakKey = "S";
break;
case 187:
dvorakKey = "+";
case 188:
dvorakKey = "W";
break;
case 189:
dvorakKey = "_";
case 190:
dvorakKey = "V";
break;
case 191:
dvorakKey = "Z";
break;
case 192:
dvorakKey = "`";
break;
case 219:
dvorakKey = "?";
break;
case 220:
dvorakKey = "\\";
break;
case 221:
dvorakKey = "]";
break;
case 222:
dvorakKey = "'";
break;
}
}
else
{
switch (mykey)
{
case 48:
dvorakKey = "0";
break;
case 49:
dvorakKey = "1";
break;
case 50:
dvorakKey = "2";
break;
case 51:
dvorakKey = "3";
break;
case 52:
dvorakKey = "4";
break;
case 53:
dvorakKey = "5";
break;
case 54:
dvorakKey = "6";
break;
case 55:
dvorakKey = "7";
break;
case 56:
dvorakKey = "8";
break;
case 57:
dvorakKey = "9";
break;
case 186:
dvorakKey = "s";
break;
case 187:
dvorakKey = "=";
break;
case 188:
dvorakKey = "w";
break;
case 189:
dvorakKey = "-";
break;
case 190:
dvorakKey = "v";
break;
case 191:
dvorakKey = "z";
break;
case 192:
dvorakKey = "~";
break;
case 219:
dvorakKey = "/";
break;
case 220:
dvorakKey = "|";
break;
case 221:
dvorakKey = "}";
break;
case 222:
dvorakKey = "\"";
break;
}
}
}

if (!dvorakKey)
{
return true;
}

out.value += dvorakKey;
return false;
}

function checkshift(evt)
{
if (document.all)
{
mykey = event.keyCode;
}
else
{
mykey = evt.which;
}

if (mykey=16)
{
shift=false;
return true;
}
}

// ascii value obtained from http://sharkysoft.com/tutorials/jsa/content/018.html
/*
function ascii(c)
{
// restrict input to a single character
c = c.charAt(0);

// loop through all possible ASCII values
var i;
for (i = 0;i<256;i++)
{
// convert i into a 2-digit hex string
var h = i.toString(16);
if (h.length==1)
h="0"+h;

// insert a % character into the string
h = "%"+h;

// determine the character represented by the escape code
h = unescape(h);

// if the characters match, we've found the ASCII value
if (h==c)
break;
}
return i;
}
*/
function ascii(d){d=d.charAt(0);var a;for(a=0;a<256;a++){var b=a.toString(16);if(b.length==1){b="0"+b}b="%"+b;b=unescape(b);if(b==d){break}}return a};
</script>
</body>
</html>