|
JavaScript - Scrambling A Virtual Keyboard
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);
Similar TutorialsGeoKBD.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>
I am trying to create a virtual pet using javascript and HTML. the pet responds to the 2 buttons I have created on my page, and the text in the two boxes as well as the photo on the page changes depending on the state of the pet. I can't seem to get my buttons to work and I don't know what code I would use to change the picture of the pest. Any help would be appreciated. my file is attached as a .txt file. 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. 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 I 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 ?
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? 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 I read the posting guidelines but I still have questions that I would love to be answered by anyone willing to tolerate me. I started studying javascript when I decided that I wanted to create a dynamic webpage after viewing some books that were made to pageflip with Javascript and after viewing a ton of animations. So I figured since everyone keeps saying Javascript is simple that if all I wanted to do was to make a book extend outwards on mouseover and then open up on click and flip pages which they already have a code for that it wouldn't be so difficult. I've read everything I could practiced a little bit, I'm not fluent but I do have a goal and a time. The problem for me comes up with figuring out what I need to do in order to make it appear as if the book is coming out of a book shelf. There is a lot of information on animations where flat objects rise above clouds. I am thinking that I would have to use some sort of sprite of a row of books both sorta sideways where you can see the side of the book as well as the edge, and both a row of books on a shelf, or perhaps a row of books with some of the books being pulled out and then on mouse over animate the scene so that it looks like the book is being pulled out. Would that work? Or is there a simpler way? Another way or I don't know. Is there a code that can make it look like a book is extending outwards without an animation or would I need to create an animation for that? Thank you. Hello, I am trying to create a virtual room painter where a user can choose from one of our photos and when they choose a certain wall color or finish, that color or finish will overlay overtop the chosen photo. I would also like an option where they can share or save the finished photo. Here is an example: Glidden Paint - Virtual Room Painter And Paint Color Visualizer | Glidden.com (I think that this will be done using javascript but I am not sure.) Thanks Reply With Quote 01-09-2015, 10:59 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts That Glidden version was done using Flash. Flash is going to be much better at something like this than JavaScript will. Essentially, if someone imports a photo and (say) designates a wall area to be repainted, you have to find the bounds of that area. How do you do that? Find adjacent pixels that are within some percentage of being the same color? Maybe. But what do you do if there is a corner in/on the wall? How do you detect that and make the part around the corner a separate area? etc. etc. etc. JavaScript *can* inspect individual pixels, but figuring out the edges of various shapes and colors in an image is not trivial. 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! I'm trying to create a type of virtual pagination that's simple, semantic, and SEO friendly. The concept is like this website: www.doner.com In the bottom right hand corner, if you select a city, different contact information appears. My theory is to assign a class name to the hyperlink, then have a DIV with a matching ID. For example... Code: <a href="#" class="michigan">Michigan</a> <a href="#" class="ohio">Ohio</a> <a href="#" class="illinois">Illinois</a> <div id="michigan"> Michigan container </div> <div id="ohio"> Ohio container </div> <div id="illinois"> Illinois container </div> The JavaScript I have written so far is... Code: var anchor = document.getElementsByTagName('a').className; // grab all hyperlinks and their classes
var div = document.getElementsByTagName('div').getElementByID; // grab all divs and their IDs
if (anchor = div) { // check to see if a hyperlink's class has a matching div ID
div.style.display = "none";
if (anchor.onclick) { // if the hyperlink is clicked...
div.style.display = "visible"; // make matching div ID visible
}
}
Nothing works yet, and I don't know where to continue. The DIVs aren't even hidden upon loading. Can anyone help me? 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 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
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 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 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 } } 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.... |
|||||||