Search code examples
javascriptjqueryhtmljquery-mobilekeydown

keydown event is not working for input type search in jquery mobile

I want to invoke keydown event for input type search in jquery mobile. Below is my html code.

 <!DOCTYPE html>
<html>
 <head>
    <meta charset="ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Insert title here</title>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {      
    $("#search1").keydown(function() {
        alert("keydown");           
        $("#search1").css("background-color", "yellow");
    });
    $("#search1").keyup(function() {
        alert("keyup");
        $("#search1").css("background-color", "pink");
    });
});
</script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">

<div data-role="content">
<input type="search" id="search1">
<input type="text" id="text1">
</div>
</div>
</body>
</html>

keydown event is getting fired for all the other input types, except for search type. Can someone please help on this?

Solution

  • From the docs found this: http://jquerymobile.com/test/docs/api/events.html

    Important: Use $(document).on('pageinit'), not $(document).ready()

    $(document).on( 'pageinit',function(event){
    $("#search1").keydown(function() {
        alert("keydown");           
        $("#search1").css("background-color", "yellow");
    });
    $("#search1").keyup(function() {
        alert("keyup");
        $("#search1").css("background-color", "pink");
    });
});

    Tryout this and see if it helps.