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?
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?
Share Improve this question asked Jan 31, 2013 at 12:06 SriksSriks 1,7096 gold badges27 silver badges41 bronze badges 1- Your example works just fine: jsfiddle/Gajotres/Jpa78 – Gajotres Commented Jan 31, 2013 at 12:10
3 Answers
Reset to default 2Include jQuery Mobile file
What you need to do is just include a jQuery file into your project. A file named jQuery.mobile.js or quite similar (ex. jQuery.ui.js) of any version can help you.
You can download it from : jQuery Mobile Official | Download I suggest to use
ResolveClientUrl
while giving path.
From the docs found this: http://jquerymobile./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.
Your code is working check here: JS Fiddle
FIDDLE'd
:)