CODEWITHSUNDEEP
javascript
Student
Student

Reputation: 28345

Javascript virtual keyboard: how to indentify text fields?

I'm developing a Javascript virtual keyboard, and I would like it to appear everytime a user press enter on a text fields. But how can I know if a text (or any input) field is selected?

--clarification

I have to information or control over the page that will be loaded. I just want that, if a input field is selected and the user press enter, my virtual keyboard shows up.

--update

Does it makes any difference if what I'm trying to do is a firefox extension? (I think it shouldn't)

Upvotes: 1

Views: 628

Answers (5)

Student
Student

Reputation: 28345

My solution, for now, was use a specified key just to open the virtual keyboard when the user request.

Upvotes: 0

Poelinca Dorin
Poelinca Dorin

Reputation: 9703

use jQuery and add the following 

            $(document).ready(function() {
                //apply action to input elements by class
                //$("#.input_class").keypress(function(e) {
                //apply action to all input elements ( input, textarea, select and button )
                $(':input').keypress(function(e) {
                    if(e.keyCode==13){
                        // Enter pressed... do anything here...
                        alert($(this).val());
                    } else {
                                            //make shure you get the desired action for other keys pressed
                        xTriggered++;
                    }
                    //do not submit the form
                    return false;
                });
            });

Upvotes: 3

Free Consulting
Free Consulting

Reputation: 4402

Despite of what jquery apologetes say, there is no hassle to instrument all fields without resorting to large and slow external library:

for (var i = 0; i < document.forms.length; i++)
  for (var j = 0; j < document.forms[i].elements.length; j++)
    if (document.forms[i].elements[j].tagName.match(/^INPUT$/i))
      if (document.forms[i].elements[j].type.match(/^TEXT$/i))
        document.forms[i].elements[j].addEventListener('focus', function(){/* your stuff here */}, false);

Upvotes: 0

Piskvor left the building
Piskvor left the building

Reputation: 92752

To get notified that a text field is selected, you could attach an event handler to onfocus of the fields you're interested in.

Example in jQuery (jQ chosen for brevity, the event works in plain JS):

$('input[type="text"]').focus(function(event){
    // do something here
});

If you only care to capture the "enter" key, you don't need to worry about focus, just attach to the onkeypress event of the textfields (see @poelinca's answer).

Upvotes: 0

Mark Baijens
Mark Baijens

Reputation: 13222

bind it to the onfocus event. That event is triggered when the input element gets the focus. You could remove the keyboard again on the onblur event if you want to hide it again.

Upvotes: 1

Related Questions