Addeventlistener with a virtual keyboard

Question

0.00/5 (No votes)

See more:

Hi Hope you are all well, I've got a question with regards to a digital board I'm creating to show targets and yields on a touchscreen . I have a page ready with conditional formatting that works ok ...my problem is I've tried to add a virtual keyboard when you click the text box the keyboard appears and you get to type targets etc. The issue is when using the virtual keyboard the addEventListener doesn't seem to acknowledge the change in the text box , which is does with a physical keyboard . Has anyone else has had an issue with adding a virtual keyboard to a text box with conditional formatting...example being if the target box is less than the actual box then the actual box will be green.

A simple version is shown below..without the virual keyboard code

Thanks for reading

ian

What I have tried:

HTML

<pre><!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    
</head>
<body>
    <body>                
<input type="text" id="text1" size="50">
<input type="text" id="text2" size="50">   
</body>
    <script type="text/javascript">
        document.getElementById("text1").addEventListener("keyup", testpassword2);
        document.getElementById("text2").addEventListener("keyup", testpassword2);

function testpassword2() {
  var text1 = document.getElementById("text1");
  var text2 = document.getElementById("text2");
  if (text1.value <= text2.value)
    text2.style.backgroundColor = "#2EFE2E";
  else
    text2.style.backgroundColor = "red";
}
    </script>
</body>
</html>

Posted 13-Oct-20 0:50am

chizzy42

Updated 13-Oct-20 21:17pm

Add a Solution

2 solutions

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)

Gerry Schmitz · Answer 1 · 2020-10-13T07:49:00

In my experience, a "virtual keyboard" has "buttons" (or something similar), and you wire up the buttons, not "keyboard" events (since now there is no KB).

You need to use the equivalent of a "send keys" if you want to tap into "keyboard input" events (without an actual KB).

Depending on the scenario, the VKB may have little to do other than backspace and accept numbers; so handling the events doesn't have to be a big deal.

(And since when are "passwords" compared using "less than or equal to"?).

chizzy42 · Answer 2 · 2020-10-13T21:17:00

Thanks for the reply gerry, i had linked a virtual keyboard that I had found to the text box and thought that properties such as onchange/change for the addEventListener would detect a change in the text box as I assumed the keyup type events wouldn't work in this case. Ill have to try and find out how to emulate a keyboard event on the virtual keyboard i guess......why i have password in the function name i dont know...well spotted

Addeventlistener with a virtual keyboard

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0