|
JavaScript - Onscreen Keyboard
I'm doing an Onscreen Keyboard in my DHTML app. It has to update the text in a textbox. However, i have a problem....
How do i append the key's character to the data wherever the cursor is currently at? Similar TutorialsI want to create a opaque menu that I can quickly access custom short-cuts etc, how can I create this for use with a specific program ?
Hi there, Does anyone know how you might use the onclick event to type a letter from the keyboard? <img src="images/a.jpg" onclick="keyCode==96" /> Something like this? Many Thanks Hello All, I have two questions regarding a wonderful Javascript keyboard I found he http://www.rawdev.net/2009/02/24/fxk...efox-keyboard/ Its a nice firefox 3 plugin that comes very close to emulating a mobile phone keyboard. It has two drawbacks, one minor one major: I am disable and and am unable to really use a keyboard, hence the virtual one. As you can imagine I also can't really write, so people send me PDF's that are editable which I can do text to speech with. I would really like to use this keyboard with these PDF's, but the selecting editable fields in a PDF doesn't produce the keyboard like selecting normal fields does. Here is the code that I believe toggles the keyboard: Code: window.addEventListener("DOMContentLoaded", function(aEvent) {
var thebrowserget = gBrowser.getBrowserForDocument(aEvent.target);
if(thebrowserget)thebrowserget.addEventListener("click", function() { FxKeyboard.itemFocused(); }, false);
FxKeyboard.toggletoolbar(true);
}, true);
},
itemFocused: function () {
var focused = document.commandDispatcher.focusedElement;
if (focused && (focused.type == 'text' || focused.type == 'textarea' || focused.type == "password")) {
// textarea found, open keyboard
this.focus = focused;
this.toggletoolbar(false);
So basically I'm wondering if there is a "focused.type" for a PDF field, and if this depends greatly on how the editable PDF was made. This may be a stretch but I see in Adobe Reader there is an option to enable or disable JavaScript so I thought it might be possible. The second problem involves the Enter key. It doesn't really submit forms, it can only add new lines. Not a huge deal, but I have this code: Code: function simKey() {
var A=[].slice.call(arguments),
a1=A[0]||"",
base= document.body;
if(a1.nodeName){ base=a1;A.splice(0,1);a1=A[0]}
if(a1 && a1.split && a1.length>1){A=a1.split("");}
if(a1.splice){ A=a1; }
A.map(function(key){
var ev = document.createEvent("KeyEvents");
ev.initKeyEvent("keypress",
true,true,window,false,false,false,false,key.toFixed?key:key.charCodeAt(0),key.toFixed?key:key.charCodeAt(0));
base.dispatchEvent(ev);
});
}
//firebug example:
var tb=$$("textarea")[0];
simKey(tb, "hello world");
simKey(tb, 13);
simKey(tb, "hello world".split(""));
// //////////////
doEnter: function (){
simKey(this.focus, 13);
}
I found this on another forum where someone had the exact same problem a few days ago with this keyboard. I've tried to add this to overlay.js file but it just doesn't seem to work. I've managed to type this whole thing on this keyboard before my session timed out, it works great, just these few things hold it back. Can anyone help me? Thanks in advance. GeoKBD.js and Geo.js is a virtual keyboard that is intended to simplify support for Georgian Writing. for Geo.js this code working fine: Code: onkeypress="return makeGeo(this,event);" But i dont know code with same function for GeoKBD.js Please help me Hello all, Ok i been practising on this a bit, trying to make a virtual keypad where someone would click and have the numbers he / she clicked display in the text box. source goes like this , am new to this dont know how to go about it. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form name="form1" style="margin:0px">
<input name="formtext1" type="text" style="position:absolute;width:200px;left:712px;top:168px;z-index:2">
</form>
<div id="text1" style="position:absolute; overflow:hidden; left:385px; top:172px; width:368px; height:28px; z-index:1">
<div class="wpmd">
<div><font class="ws11">Please Enter the Password with virtual keyboard :</font></div>
</div></div>
<div id="table1" style="position:absolute; overflow:hidden; left:576px; top:221px; width:114px; height:98px; z-index:3">
<div class="wpmd">
<div><TABLE bgcolor="#FFFFFF" border=0 bordercolorlight="#C0C0C0" bordercolordark="#808080">
<TR valign=top>
<TD width=26><label>
<input type="submit" name="Submit" value="1">
</label>
<BR></TD>
<TD width=27><input type="submit" name="Submit2" value="2">
<BR></TD>
<TD width=22><input type="submit" name="Submit3" value="3">
<BR></TD>
<TD width=20><input type="submit" name="Submit4" value="4">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><input type="submit" name="Submit5" value="5">
<BR></TD>
<TD width=27><input type="submit" name="Submit6" value="6">
<BR></TD>
<TD width=22><input type="submit" name="Submit7" value="7">
<BR></TD>
<TD width=20><input type="submit" name="Submit8" value="8">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><BR></TD>
<TD width=27><input type="submit" name="Submit9" value="9">
<BR></TD>
<TD width=22><input type="submit" name="Submit10" value="0">
<BR></TD>
<TD width=20><BR></TD>
</TR>
</TABLE>
</div>
</div></div>
</body>
</html>
Kindly help someone ... Reply With Quote 12-26-2014, 12:27 PM #2 vwphillips View Profile View Forum Posts Visit Homepage Senior Coder Join Date Mar 2005 Location Portsmouth UK Posts 4,540 Thanks 3 Thanked 513 Times in 500 Posts Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta name="generator" content="Web Page Maker">
<style type="text/css">
/*----------Text Styles----------*/
.ws6 {font-size: 8px;}
.ws7 {font-size: 9.3px;}
.ws8 {font-size: 11px;}
.ws9 {font-size: 12px;}
.ws10 {font-size: 13px;}
.ws11 {font-size: 15px;}
.ws12 {font-size: 16px;}
.ws14 {font-size: 19px;}
.ws16 {font-size: 21px;}
.ws18 {font-size: 24px;}
.ws20 {font-size: 27px;}
.ws22 {font-size: 29px;}
.ws24 {font-size: 32px;}
.ws26 {font-size: 35px;}
.ws28 {font-size: 37px;}
.ws36 {font-size: 48px;}
.ws48 {font-size: 64px;}
.ws72 {font-size: 96px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
/*----------Para Styles----------*/
DIV,UL,OL /* Left */
{
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<form name="form1" style="margin:0px">
<input name="formtext1" type="text" style="position:absolute;width:200px;left:712px;top:168px;z-index:2">
</form>
<div id="text1" style="position:absolute; overflow:hidden; left:385px; top:172px; width:368px; height:28px; z-index:1">
<div class="wpmd">
<div><font class="ws11">Please Enter the Password with virtual keyboard :</font></div>
</div></div>
<div id="table1" style="position:absolute; overflow:hidden; left:576px; top:221px; width:114px; height:98px; z-index:3">
<div class="wpmd">
<div><TABLE bgcolor="#FFFFFF" border=0 bordercolorlight="#C0C0C0" bordercolordark="#808080">
<TR valign=top>
<TD width=26><label>
<input type="button" name="Submit" value="1">
</label>
<BR></TD>
<TD width=27><input type="button" name="Submit2" value="2">
<BR></TD>
<TD width=22><input type="button" name="Submit3" value="3">
<BR></TD>
<TD width=20><input type="button" name="Submit4" value="4">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><input type="button" name="Submit5" value="5">
<BR></TD>
<TD width=27><input type="button" name="Submit6" value="6">
<BR></TD>
<TD width=22><input type="button" name="Submit7" value="7">
<BR></TD>
<TD width=20><input type="button" name="Submit8" value="8">
<BR></TD>
</TR>
<TR valign=top>
<TD width=26><BR></TD>
<TD width=27><input type="button" name="Submit9" value="9">
<BR></TD>
<TD width=22><input type="button" name="Submit10" value="0">
<BR></TD>
<TD width=20><BR></TD>
</TR>
</TABLE>
</div>
</div></div>
<script type="text/javascript">
<!--
function Enter(p){
document.getElementById('formtext1').value+=p.value;
}
var p=document.getElementById('table1').getElementsByTagName('INPUT');;
for (var z0=0;z0<p.length;z0++){
p[z0].onclick=function(){ Enter(this); }
}
//-->
</script>
</body>
</html>
So I have been asked to debug a page, for some reason that I cannot figure out after 3 days of messing I cannot use my keyboard in the input boxes to backspace or ANYTHING but enter new text. There is nothing in firebug when run either. I kind of figure it's something on the JS end but not sure where, after 3 days I am beffudled :S http://www.pcatonline.com Hey guys. Been trying to mod an existing open source virtual keyboard script by adding a scramble function for security purposes which scrambles the keyboard after each click. Quite new to javascript and have spent a full week studying OOP for Javascript and testing it out, but to no avail. Partially i guess that the script is too complex for a newbie like me. Would appreciate it alot if i could get some tips/ guidience. Here's the full script: http://www.greywyvern.com/code/javas...yboard.user.js Excerpts of what i'm trying to work on: An attempt to get it to randomise (without any clicking yet) The numpad is apparently stored in an array so i tried to pass it into a sorting algorithm. Doesn't work and actually i have no idea if i'm even trying in the right direction. Would appreciate any help! Code: /* ***** Layout Number Pad ************************************* */
this.VKI_numpad = [
[["$"], ["\u00a3"], ["\u20ac"], ["\u00a5"]],
[["7"], ["8"], ["9"], ["/"]],
[["4"], ["5"], ["6"], ["*"]],
[["1"], ["2"], ["3"], ["-"]],
[["0"], ["."], ["="], ["+"]]
];
function fisherYates (VKI_numpad) {
var i = this.VKI_numpad.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = this.VKI_numpad[i];
var tempj = this.VKI_numpad[j];
this.VKI_numpad[i] = tempj;
this.VKI_numpad[j] = tempi;
alert ('This line is read');
}
}
fisherYates(VKI_numpad);
How to use the shortcut keys in jvascript? Can someone illustrate it to me with an example? Such as suppose on clicking the Ctrl+alt key,i want to display a prompt dialog box........How to do this? Need some urgent help..... thank you in advance Hi, I want to make a button which if pressed works as if F11 key on keyboard is pressed. For button html would be like this (I think) <button type="button" onclick="some function">FullScreen</button> Now I don't know what function would go in that onclick as I don't have the JS. One more thing that would be nice if the text 'FULLSCREEN' changes to 'NORMAL WINDOW' when the button is pressed, so that the user could realize that they have to press the same button again to get out of fullscreen, it would be like toggle at every click text changes from 'FULLSCREEN' to 'NORMAL WINDOW' and then if pressed again changing to 'FULLSCREEN'. Hi, I am trying to get this code to work in IE. It works on Firefox, but not on IE. Basically it blocks out scrolling the page down with space button, and registers up and down keys to run some code. The entire case statement including event registering and my code works completely fine in FF but it just won't work in IE (meaning that I can scroll down with space, and up and down with the up and down keys respectively). Here's the code, any help would be much appreciated. By the way I put this function in the HEAD section. Code: window.onkeydown = function(event)
{
// No space scrolling!
switch (event.keyCode)
{
case 32: return false; break;
case 38:
{
if (rB_Script.last_item <= 1000)
{
return;
}
else
{
rB_Script.focus_on_step(rB_Script.last_item - 1);
}
return false; break;
}
case 40:
{
if (rB_Script.last_item >= rB_Script.final_item)
{
return;
}
else if (rB_Script.last_item != -1)
{
rB_Script.focus_on_step(rB_Script.last_item + 1);
}
else
{
rB_Script.focus_on_step(1000);
}
return false; break;
}
}
}
Thank you very much! Hey, I am having some difficulties and wondered if anyone could help, i have created a keyboard that works and inputs the values pressed into a text box, i have then tried to expand on this and create a keyboard with multiple layouts that dynamically change when a button is pressed, i have done this by having an iframe within the page and calling the parent function but it will no longer input the text into the textbox. The CSS styling also works in Safari but won't on firefox, any help would be much appreciated Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type='text/javascript'> function addtotextbox(i) { if(document.getElementById('keyboardsearchbox').value.length==0) var node = document.getElementbyId('keyboard').document.getElementById(i).firstChild.nodeValue else node = document.getElementbyId('keyboard').document.getElementById(i).firstChild.nodeValue.toLowerCase() if(node == "space") document.getElementbyId('keyboard').document.getElementById("keyboardsearchbox").value += " " else document.getElementbyId('keyboard').document.getElementById('keyboardsearchbox').value += node } function resettext() { document.getElementById('keyboardsearchbox').value = "" } function backspace(){ var currentvalue=document.getElementById("keyboardsearchbox").value var newvalue=currentvalue.substr(0,currentvalue.length-1) document.getElementById("keyboardsearchbox").value=newvalue } var keyboardstyle='<html><head><style type="text/css">.orangebox{background-color:#F60;}.keyboard {font-family: Arial, Helvetica, sans-serif;text-align:center;font-size: 25px;font-weight: bold;color: #000;background-color: #F60;}.keyboard:hover {font-family: Arial, Helvetica, sans-serif;text-align:center;font-size: 25px;font-weight: bold;color: #000;background-color: #F90;}body {margin-left: 0px;margin-top: 0px;}.textboxstyle {font-family:Arial, Helvetica, sans-serif;font-size:20px;font-weight:normal;color:#F60;}</style></head><body>' function qwerty(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="1" onclick="parent.addtotextbox(this.id)">1</td><td width="90" align="center" class="keyboard" id="2" onclick="parent.addtotextbox(this.id)">2</td><td width="90" align="center" class="keyboard" id="3" onclick="parent.addtotextbox(this.id)">3</td><td width="90" align="center" class="keyboard" id="4" onclick="parent.addtotextbox(this.id)">4</td><td width="90" align="center" class="keyboard" id="5" onclick="parent.addtotextbox(this.id)">5</td><td width="90" align="center" class="keyboard" id="6" onclick="parent.addtotextbox(this.id)">6</td><td width="90" align="center" class="keyboard" id="7" onclick="parent.addtotextbox(this.id)">7</td><td width="90" align="center" class="keyboard" id="8" onclick="parent.addtotextbox(this.id)">8</td><td width="90" align="center" class="keyboard" id="9" onclick="parent.addtotextbox(this.id)">9</td><td width="90" align="center" class="keyboard" id="0" onclick="parent.addtotextbox(this.id)">0</td></tr><tr><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td width="90" align="center" class="keyboard" id="e" onclick="parent.addtotextbox(this.id)">E</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="i" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">I</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td></tr><tr><td id="space" width="90" rowspan="2" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="a" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">A</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td><td id="d" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">D</td><td id="f" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">F</td><td id="g" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">G</td><td id="h" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">H</td><td id="j" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">J</td><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td></tr><tr><td align="center" valign="middle" bgcolor="#F60" id="box1"></td><td align="center" valign="middle" bgcolor="#F60" id="box2"></td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="c" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">C</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="b" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">B</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="m" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">M</td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } function dorvak(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="1" onclick="parent.addtotextbox(this.id)">1</td><td width="90" align="center" class="keyboard" id="2" onclick="parent.addtotextbox(this.id)">2</td><td width="90" align="center" class="keyboard" id="3" onclick="parent.addtotextbox(this.id)">3</td><td width="90" align="center" class="keyboard" id="4" onclick="parent.addtotextbox(this.id)">4</td><td width="90" align="center" class="keyboard" id="5" onclick="parent.addtotextbox(this.id)">5</td><td width="90" align="center" class="keyboard" id="6" onclick="parent.addtotextbox(this.id)">6</td><td width="90" align="center" class="keyboard" id="7" onclick="parent.addtotextbox(this.id)">7</td><td width="90" align="center" class="keyboard" id="8" onclick="parent.addtotextbox(this.id)">8</td><td width="90" align="center" class="keyboard" id="9" onclick="parent.addtotextbox(this.id)">9</td><td width="90" align="center" class="keyboard" id="0" onclick="parent.addtotextbox(this.id)">0</td></tr><tr><td id="q" width="90" align="center" bgcolor="#F60" > </td><td id="w" width="90" align="center" bgcolor="#F60"> </td><td width="90" align="center" bgcolor="#F60" id="e" > </td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="f" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">F</td><td id="g" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">G</td><td id="c" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">C</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td></tr><tr><td id="a" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">A</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="e" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">E</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="i" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">I</td><td id="d" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">D</td><td id="h" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">H</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td></tr><tr><td id="space" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="j" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">J</td><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="b" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">B</td><td id="m" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">M</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } function alphabet(){ var style=keyboardstyle var s= style + '<table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"><tr><td><table border="0" cellpadding="0" cellspacing="1"><tr><td width="90" align="center" class="keyboard" id="a" onclick="parent.addtotextbox(this.id)">A</td><td width="90" align="center" class="keyboard" id="b" onclick="parent.addtotextbox(this.id)">B</td><td width="90" align="center" class="keyboard" id="c" onclick="parent.addtotextbox(this.id)">C</td><td width="90" align="center" class="keyboard" id="d" onclick="parent.addtotextbox(this.id)">D</td><td width="90" align="center" class="keyboard" id="e" onclick="parent.addtotextbox(this.id)">E</td><td width="90" align="center" class="keyboard" id="f" onclick="parent.addtotextbox(this.id)">F</td><td width="90" align="center" class="keyboard" id="g" onclick="parent.addtotextbox(this.id)">G</td><td width="90" align="center" class="keyboard" id="h" onclick="parent.addtotextbox(this.id)">H</td><td width="90" align="center" class="keyboard" id="i" onclick="parent.addtotextbox(this.id)">I</td><td width="90" align="center" class="keyboard" id="j" onclick="parent.addtotextbox(this.id)">J</td></tr><tr><td id="k" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">K</td><td id="l" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">L</td><td width="90" align="center" class="keyboard" id="m" onclick="parent.addtotextbox(this.id)">M</td><td id="n" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">N</td><td id="o" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">O</td><td id="p" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">P</td><td id="q" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Q</td><td id="r" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">R</td><td id="s" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">S</td><td id="t" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">T</td></tr><tr><td id="space" width="90" rowspan="2" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">space</td><td id="u" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">U</td><td id="v" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">V</td><td id="w" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">W</td><td id="x" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">X</td><td id="y" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Y</td><td id="z" width="90" align="center" class="keyboard" onclick="parent.addtotextbox(this.id)">Z</td><td id="z" bgcolor="#F60" width="90" align="center"></td><td id="k" width="90" align="center" bgcolor="#F60" ></td><td id="l" width="90" align="center" class="keyboard" ></td></tr><tr><td align="center" valign="middle" bgcolor="#F60" id="box1"></td><td align="center" valign="middle" bgcolor="#F60" id="box2"></td><td id="z" width="90" align="center" bgcolor="#F60" ></td><td id="x" width="90" align="center" bgcolor="#F60" ></td><td id="c" width="90" align="center" bgcolor="#F60" ></td><td id="v" width="90" align="center" bgcolor="#F60" ></td><td id="b" width="90" align="center" bgcolor="#F60" ></td><td id="n" width="90" align="center" bgcolor="#F60" ></td><td id="m" width="90" align="center" bgcolor="#F60" ></td></tr></table></td></tr></table></body></html>' with(document.getElementById('keyboard').contentDocument){ open() write(s) close() } } </script> <style type="text/css"> .titles { font-family:Arial, Helvetica, sans-serif; text-align:center; font-size:18px; font-weight:bold; color:#F60; background-color:#FFF; } .textboxstyle { font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal; color:#F60; } .borderbox { border: #666; } .borderboxorange { border:#666; background-color:#F60; } body { margin-left: 0px; margin-top: 0px; } </style> </head> <body> <table width="900" border="1" cellpadding="0" cellspacing="0" class="borderbox"> <tr> <td><table width="900" border="0" cellpadding="0" cellspacing="1"> <tr> <td width="403" height="30" colspan="3" align="center" valign='middle' bgcolor="#F60" id="textbox"><form id="form1"> <input name="keyboardsearchbox" type="text" class="textboxstyle" id="keyboardsearchbox" size="70"/> </form></td> <td width="150" align="center" valign='middle' bgcolor="#F60" id="textbox"><input type="submit" name="reset" id="reset" value=" Reset " onclick="resettext()" /></td> </tr> <tr> <td height="30" align="center" valign='middle' bgcolor="#F60" id="reset"><input type="submit" name="qwerty" id="qwertybutton" value=" Qwerty " onclick="qwerty()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="qwerty"><input type="submit" name="dorvak" id="dorvakbutton" value=" Dorvak " onclick="dorvak()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="dorvak"><input type="submit" name="alphabet" id="alphabetbutton" value=" alphabet " onclick="alphabet()" /></td> <td align="center" valign='middle' bgcolor="#F60" id="alphabet"><input type="submit" name="backspace" id="backspace" value=" backspace " onclick="backspace()" /></td> </tr> <tr> <td height="30" colspan="4" align="center" valign='middle' id="iframe"><iframe id='keyboard' width='900'></iframe></td> </tr> </table></td> </tr> </table> </body> </html> Thanks! Joe I can't seem to capture keystrokes (via onkeydown) in Firefox. Now before you judge too quickly, here is a snippet that DOES work in Firefox -- but only by itself; not when pasted into my program: ------------------------------------------------------------------------ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script language=javascript>
<!--
function vProcessKeyboard(e)
{
e = e || window.event;
var code = e.keyCode || e.which;
document.getElementById("chardisplay").innerHTML = code;
}
//-->
</script>
<body>
<script language=javascript>
<!--
document.onkeydown = vProcessKeyboard
//-->
</script>
<div id="chardisplay"></div>
</body>
</html>
------------------------------------------------------------------------ Here's my question: What would cause the above code to fail, when used in a larger, more complicated webpage? If I debug my webpage (using FireBug 1.4.5), I note that "onkeydown" indeed points to my keyboard handler. But when I put a simple debug message in that handler, I get absolutely nothing -- no matter what code I paste in the keyboard handler, it doesn't run. No matter how many keys I press! I run the same program in Internet Explorer and it runs fine. I run the keyboard code by itself in Firefox and it runs fine. I've spent about 10 hours Googling this, and all I can find is discussions of how to capture keystrokes in Firefox vs. IE. I found about 20 different variations on the code I pasted above. The "program" I'm trying to use with this keyboard capture code with is a large browser game -- a glorified webpage, even if it behaves like a Windows game -- with hundreds of objects (divs). There are several layers of graphics to make the game happen. I'm just trying to figure out what is FUNDAMENTALLY different between my large program and a simple webpage, when it comes to something simple like keyboard capture. Is it the size, in bytes, of my webpage? Is it the large number of DIVs? The large number of functions? Incidentally, I'm not using Frames. Any help would be much appreciated. Thanks, Matthew Input from Chromes on-screen keyboard and a form text field with an onchange or onkeyup function call doesn't seem to work. Can you think of a way around it? Cheers
Edit2:: This is what I got to work. Code: <INPUT class=touch type=button value='UP' onMouseDown="up=true;" onMouseUp="up=false;"> <INPUT class=touch type=button value='DOWN' onMouseDown="down=true;" onMouseUp="down=false;"> Then added a check to see if (up==true) {move up code} else if (down==true) {move down code} etc Edit:: Basically Code: <INPUT class=touch type=button value='38' onMouseDown="movingUP();"> Then in JS Code: function movingUP(){
window.event.keyCode = 38;
}
But what do I put in movingUP() to send keyCode 38 when while the button is being clicked????????????????????? Trying to add 8 icons of W,A,S,D, LEFT, RIGHT, UP, DOWN which upon click/touch will input the relative command to the screen canvas for mobiles that don't have a keyboard. They aren't clicking on the canvas. I need some buttons/icons/images outside the canvas probably in a div, that send input events as an alternative to a keyboard...Something that can be clicked and held down to repeatedly spam that key to walk in that direction. I have script to click icons from a keyboard and output the clicked key to a text field, but I don't know how to tie it into my keyboard listener in my game.. My game code uses: Code: // Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
Then elsewhere I can trigger events when keysDown contains the number of a key that triggers an item like: Code: if (38 in keysDown && hero.y > 0 ) { // Player holding UP key
//walk north code here
}
Is there a simple way to click on a button and send the "UP" keyCode to the entire screen? Particularly the canvas element......Or get it into my keysDown[e.keyCode]; I found this: Quote: function addKey(cKey) { d = document.forms["foo"].elements["bar"]; d.value = (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value; } //elsewhere in html body <INPUT class=touch type=button value=w onClick="addKey(this)"> which will send 'w' when clicked, and I tried to send '38' instead but it only sends it to 1 element and not the entire screen....so it shows 38 in a text box each time I click it but it doesn't actually send 38 to keys being pressed. Is there a simple way to do this? I wanted to add a fire button and others I figured I could just put an image with an event but can't figure it out.... Hi there, This forum was linked off of http://www.javascriptkit.com so I was hoping someone could lend me a hand. I like the image rotator script at http://www.javascriptkit.com/script/...tionshow.shtml as it is very easy to use. It currently pauses the image rotation on mouseover, but I would like to enable it to also pause onFocus and onBlur. My initial thoughts were to add a small "pause" form button under the image description that people could tab to with the keyboard, and perhaps capture the onBlur or onFocus event to initiate the pause. But the code is difficult to wrap my mind around. Any thoughts? Link to .js code: http://www.javascriptkit.com/script/...nsitionshow.js I have a web application (Javascript) that captures keyboard input. The code works independently -- in fact, I've tried several different variations/code snippets that other people have used/recommended. They all work, and are functionally equivalent. But here's the clincher -- my whole program works fine -- keyboard and all -- once I run Venkman's Javascript debugger and then return to my program window! It's as if Venkman's is doing something (setup, initialization) that my program isn't. What could it be though? Thanks, Matthew Here is the keyboard portion of my program: Code: function keyboard_handler(e) {
e = e || window.event;
var keyunicode = e.charCode || e.keyCode
var KeyID = e.keyCode || e.which;
vDebugPrint("Keyboard pressed: " + KeyID);
vDebugPrint("Unicode: " + keyunicode);
}
document.onkeydown = keyboard_handler;
Hi I am trying to develop a Qwerty Shifter http://www.cross-browser.com/toys/qwertyshifter.html by handling keyboard events. I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s" "b" changes "n" for internet explorer I have script function InputEventKeyPress(event){ window.event.keyCode = shifter (window.event.keyCode); } //Key press function shifter (keyAscii) { switch (keyAscii){ //CAPITAL LETTERS A - Z case 65 : return 83; break; //A case 66 : return 78; break; //B case 67 : return 86 ; break; //C } } First off... I am new to javascript, and am learning while trying to add some cool extra features to an existing project. An existing JSP is generating the HTML page and table. I have retro-fitted it so that it adds to each input field a 'trigger' to the onkeyup event. The purpose of this trigger is check for the the cursor keys being pressed (UP, DOWN, LEFT, RIGHT) and then if it is a logically valid move, shift to the next cell in that direction. Code: <td class="inputField" rowspan="1" colspan="1" nowrap="nowrap"> <input name="ColorNumber0" id="" maxlength="" size="20" onchange="saveFieldObj(this)" onkeyup="return doOnKeyUp(event, 18, 14, 'ColorNumber0')" type="text"> </td> Now, the function it calls, doOnKeyUp, for the most part is working fine... when the input field in the table cells are a textbox or textarea, my method can re-focus the fields appropriately. HOWEVER, I am having a huge headache when the input field is a combo box. Basically, the value of the combo box is changed with the cursor keys (which is default combo box behaviour (I think)), instead of moving to the next editable cell in that chosen direction. Problem #1: My question: Is there a way to intercept/override the various onKey events or similar for the combo boxes. For the combo boxes, I want to continue to move between table cells UNLESS a do something specific, like press the spacebar to entire an update/modification mode for the current cell. Everything I have done so far does not prevent the combo box events from triggering. Any ideas? Problem #2: Also, I tried a nasty hack to try and get it to work, by trying to switch the combo box's value back 1 spot (if it appeared to be needed) by changing the <combo box>.selected value. However, that change never appears to be taking hold, so it is staying at whatever the original selected value was. For this one, I am just curious as to the correct way to have javascript change the selected value in a combo box and make it "stick" and make it applied to the view/UI? Code example: Code: var selectedIdx = (curObj.selectedIndex - 0);
if ( selectedIdx < curObj.length ) {
var newIdx = (selectedIdx-0) - 1;
curObj[selectedIdx].selected = "0";
curObj[newIdx].selected = "1";
curObj[newIdx].focus();
//curObj.selectedIndex = newIdx;
}
You can probably tell by the code that I had been trying various things to change the combo box's selection via javascript, but none has worked for me. Any help on either topic would be greatly appreciated! |
|||||||