15

I have defined keyboard events which is working good in desktop but for touch devices not getting the onscreen keyboard event. I need to capture if user is typing. I have used the following segment of code :

$('#id').keydown(function(e){
  //some code here
});

$('#id').keyup(function(e){
  //some code here
})

I want the code defined in keydown and keyup to trigger even for touch devices (both tablets and mobiles). Please suggest how to capture the onscreen keyboard event and make the above code to run.

user850234
  • 3,373
  • 15
  • 49
  • 83
  • 1
    About which devices in particular are you talking about? The above code works on Safari for iPhone/Pad/Pod. – mamoo Mar 30 '12 at 10:19
  • @mamoo ipad,iphone,android. But this is not working for me in safari – user850234 Mar 30 '12 at 10:27
  • I tested the following code: http://jsfiddle.net/dzKtw/1/ and it works for me... – mamoo Mar 30 '12 at 10:31
  • does it work with setInterval function. I have defined setInterval and in every 1 sec i am checking if text box is blank or user has typed any text and alternatively hiding or displaying the clear text image. But this does not seem to work in my case not undersanding why – user850234 Mar 30 '12 at 10:43
  • How to tackle this problem in Android devices? – Foreever Feb 03 '14 at 07:38
  • http://stackoverflow.com/a/25172585/312598 – sebpiq May 16 '16 at 14:58
  • Android bug: https://bugs.chromium.org/p/chromium/issues/detail?id=118639 – nothingisnecessary Dec 14 '16 at 22:01
  • This one is relevant: even if you get the event, you still need to jump through hoops to get the keycode: https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229 – Herbert Van-Vliet Feb 03 '22 at 08:54

3 Answers3

16

Have you tried using key press instead of key down 

$("#id").keypress(function() {

});

Updated :

Due to android problems I now normally wrap my checks like this 

if ($.browser.mozilla) {
    $("#id").keypress (keyPress);
} else {
    $("#id").keydown (keyPress);
}

function keyPress(e){
    doSomething;
}
Dominic Green
  • 10,142
  • 4
  • 30
  • 34
  • 1
    This is a pretty old answer now, I think recently I have come across this problem and have solved it for now by doing a simple check. I have updated my answer see if that works, let me know how you get on. – Dominic Green Feb 03 '14 at 11:54
  • `$.browser` deprecated and removed in jq 1.9. – px5x2 Sep 15 '15 at 10:32
  • I am using vue3, and it seems keyup fires, but keypress does not (Android 9, Chrome 88.0.4324.181). If your situation is like mine and you're using the events to do some form of validation or evaluation, the solution could be to rethink the requirements and combine the functions. – Herbert Van-Vliet Feb 03 '22 at 08:48
1

One way to solve this is by using setInterval when keyup or keydown events are not detected.

var keyUpFired = false;
$('#input').on('keyup',function() {
    keyUpFired = true;
    // do something
});
if( keyUpFired === false) {
    setInterval(function() {
        if($('#input').val().length>0) {
        // do something         
        }
    },100); 
}

Here is a small example using Materialize in order to test in touch devices.

$(document).ready(function() {
var keyUpFired = false;
$('#input').on('keyup',function() {
keyUpFired = true;
if ($('#input').get(0).checkValidity() === true) {
$('label[for="input"]').attr('data-success','Custom Success Message: You typed...'+$(this).val());
} else {
$('label[for="input"]').attr('data-error','Custom Error Message: Username too small');          
}
validate_field($('#input')); 
});
if( keyUpFired == false) {
setInterval(function() {
if($('#input').val().length>0) {
if ($('#input').get(0).checkValidity() !== false) {
$('label[for="input"]').attr('data-success','Custom Success Message: You typed...'+$('#input').val());
} else {
$('label[for="input"]').attr('data-error','Custom Error Message: Username too small');          
}
validate_field($('#input'));  
}
},100); 
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
 <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input placeholder="5-20 characters..." id="input" pattern=".{5,20}" type="text" class="validate">
          <label for="input" data-error="wrong" data-success="right">Username</label>
        </div>
      </div>
    </form>
  </div>
-1

The last answer on this page works: How can I get jquery .val() AFTER keypress event? -

Basically discard the "keyup" and change to "input", something like: $(document).delegate('#q', 'input', function(e) { etc }

Community
  • 1
  • 1
Paul Keane
  • 1