Sriks Sriks -4 years ago 150
HTML Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download