Color fields in virtual Keyboard

Question

1.00/5 (1 vote)

See more:

Hello to everybody! i am working on a project, which is going to be something like that. So i've made the virtual keyboard by using div tags and i want every key the user is pressing to be highlited in the virtualKB. I've tried for some days working in the idea to have onkeypress event in the div tags, so when a key is pressed to make JS validation to see which key to highlite. I've come to an end with that solution cause i tried everything but its not working. I would be really appreciated if anybody could give me an alternative idea about that.
Thanks in advance!

Posted 24-Oct-13 3:32am

pedrag

Add a Solution

Comments

Sergey Alexandrovich Kryukov 24-Oct-13 20:13pm

Not clear. What exactly did you try? What's the problem? Why "validation"? The idea is quite simple, hard to understand what are you possibly missing...
—SA

pedrag 25-Oct-13 7:29am

thanks a lot for the advices!!

Sergey Alexandrovich Kryukov 25-Oct-13 9:59am

I actually described the whole solution in my answer. Will you accept it formally?
—SA

pedrag 25-Oct-13 8:04am

Seeing your answer (excepts the JQuery part) the problem is tha same as my thinking. I wanna have a general function, which is gonna do the check for whick key is pressed. This is my big problem. I tried some ideas that came out, but with no luck.

Sergey Alexandrovich Kryukov 25-Oct-13 10:00am

Programming is not a matter of luck. Not at all.

Now, what would be a problem? Do you have further questions? I described all parts of what you need to do, you only have to put it all together...

—SA

pedrag 25-Oct-13 10:41am

No you did not or i can't get what u mean. I need something which is going to do a generally check for every letter (div-tag) i have on the virtualKB. In your solution, as i underestood it, i will have to check each letter seperately

Sergey Alexandrovich Kryukov 25-Oct-13 11:13am

I did not?! Don't mix things up different things: I did it, this is you who cannot get it.

You could ask your follow-up question but instead you simply resisting. Do you want to get result or not? After all, you are interested the most.
—SA

pedrag 25-Oct-13 8:12am

one idea which i tried but didn't work was to have inside a JS function code which gives me the pressed key (such as event.which). In the next step, in every id i had given a value like: in the id which includes letter R i'd given id R. And so the code:
function colorLet(e) {
var let = String.fromCharCode(e.which);
document.getElementsByID("let").color.style = "red";
}
I thought a general function like this will work. I don't underestand why is not

Sergey Alexandrovich Kryukov 25-Oct-13 10:14am

Look, listen to a good advice: stop doing it all by your own, start using jQuery. It simplifies development by orders of magnitude...
—SA

pedrag 25-Oct-13 10:39am

Thanks for the advice : ))

pedrag 25-Oct-13 10:45am

But i can't do now all the necessary research

Sergey Alexandrovich Kryukov 25-Oct-13 11:11am

No, just the opposite. It's not research. (With such "all the research" attitude you won't go far :-( )
But doing it all by yourself you will waste too much time. jQuery saves you a lot.
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-10-24T14:21:00

Don't use onkeypress event (this is how it is really called), use onkeydown (to highlight) and onkeyup (to stop highlighting).
Put all the keys in some element and find each key using DOM navigation, to avoid such a tedious thing as giving unique IDs to all keys. One good way to do it, as well as adding event handling and writing the handlers themselves, is using jQuery. Please see:
http://api.jquery.com/children/[^],
http://api.jquery.com/each/[^],
http://api.jquery.com/keydown/[^],
http://api.jquery.com/keyup/[^].

For highlighting, use two different CSS styles and toggle them back and forth on onkeydown/onkeyup events:
http://api.jquery.com/addClass/[^],
http://api.jquery.com/removeClass/[^],
http://api.jquery.com/toggleClass/[^],
http://api.jquery.com/category/css/[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com[^],
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).

—SA