Any idea why this doesn't work whatsoever on any browser?
If i try it in jsfiddle it works.
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
HTML
<script type="text/javascript" src="counts.js"></script>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<input type="text" id="input_area"/>
</body>
JS
$(document).ready(function() {
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
I am ready to bet 5 bucks that you didn't wrap it in a document.ready handler in your actual application which jsfiddle does by default:
$(function() {
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
Another possibility is you forgot to reference jQuery or you referenced it from a wrong url.
Depending on the browser, the which property might not be implemented. You should also check for keyCode:
$(document).ready(function() {
$("#input_area").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
alert('You pressed enter!');
}
});
});
If it works when running in jsfiddle, then it works. I suspect you're trying to register the keypress listener when the dom is not loaded yet, and input_area is not available yet. Wrap it inside $(document).ready :
$(document).ready(function() {
$('#input_area').keypress(function(e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
});
Try to use binding,
$('#input_area').bind('keypress', function(e){
alert(e.which);
});
Related
UPDATE: I am constructing the form via Javascript, so the form is not there on page load.
I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
return false;
}
});
However this does not work, there is no alert and the form still gets sent. How do I solve this?
Use preventDefault() to prevent the form from submitting.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
e.preventDefault();
}
});
Example with a form:
$('form').submit(function(e){
e.preventDefault();
});
https://jsfiddle.net/aya6ockv/
Use onkeypress attribute in your input as follows:
<input type="text" onkeypress="myFunction(event)">
<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if(x == 13) {
alert("enter pressed");
return false;
}
}
</script>
I would do it like this and change 'form' to #input. Unless you want to stop this enter submission site wide, then this as is should work well.
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
Just created a JSFiddle that shows that it works. Check it out
$('#input').keydown(function (e) {
if (e.keyCode == 13) {
alert('alert pressed');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<input text="name" id="input">
<button type="submit">Submit</button>
</form>
return false is more efficient than e.preventdefault(). Please look at event.preventDefault() vs. return false
$("#input").keydown(function (e) {
if (e.which == 13) {
alert("enter pressed");
return false;
}
});
So I have this API call to Wikipedia which works on button click, but I want to search it on enter press as well. I have tried something like this but got stuck..any help appreciated.
$('#search').keydown(function (e) {
if (e.which == 13) {
$("#searchTerm").click();
}
})
Here's the fiddle:
https://jsfiddle.net/ut88e0y3/
Instead of listen each keypress, you can use <form> element and submit event. Check this fiddle.
you should use keypress with the document like this:
$(document).keypress(function(e) {
if(e.which == 13) {
if($('#search').is(':focus')){
$('#searchTerm').click();
}
}
});
see your example after edit here: https://jsfiddle.net/IA7medd/7j6h1jv7/
You should attach the event to the <input>, not to the <button>.
$('#searchTerm').keydown(function (e) {
if (e.which == 13) {
$("#search").click();
}
});
Or, if you prefer attaching to the document:
$(document).on('keydown', '#searchTerm', function (e) {
if (e.which == 13) {
$("#search").click();
}
});
See: https://jsfiddle.net/tbnexLd8/
I'm having a problem binding this script to a submit button...
$('input').on('keydown', function(event) {
var x = event.which;
if (x === 13) {
event.preventDefault();
}
});
I've done it before but it's been a long time and the examples on the web are not doing it for me. Thanks :)
jQuery(function($) { // DOM is now ready
// your code here
});
should do the trick.
https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(function(){
$('input').on('keydown', function(e) {
if (e.keyCode == 13 || e.which == 13) {
e.preventDefault();
}
});
})
Please try this
or you can try this code by using IIFE
(function($) {
$('input').on('keydown', function(e) {
if (e.keyCode == 13 || e.which == 13) {
e.preventDefault();
}
});
})(jQuery);
In chrome(windows), I can capture keypresses on characters, but not on the arrowkeys. See sample-code below:
$('body').on('keypress', function(e) {
console.log('Only works on charcters, in chrome')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How can I capture arrow-key-presses?
Try changing keypress to keyup:
$('body').on('keyup', function(e) {
console.log('Works on everything :)')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I think keydown is working fine
$('body').on('keydown', function(e) {
console.log('Only works on charcters, in chrome')
});
Fiddle
I really like this module for key press triggers:
https://github.com/madrobby/keymaster
It really reduces the amount of boilerplate code you need to write when working with key presses.
// define short of 'down'
key('down', function(){ alert('you pressed down') });
How can I capture arrow-key-presses?
Use e.keyCode to detect which key is pressed.
Like this :
$('body').on('keyup', function(e) {
if (e.keyCode == '38') {
alert("up arrow");
}
else if (e.keyCode == '40') {
alert("down arrow");
}
else if (e.keyCode == '37') {
alert("left arrow");
}
else if (e.keyCode == '39') {
alert("right arrow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I need to add class to the input element in Opencart search(in header.tpl)
HTML CODE:
<input type="text" name="search" id="input-search" class=""/>
JQUERY CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
if (e.keyCode == 13) {
$("#input-search").addClass("button-search");
}
});
});
</script>
I am using Opencart and to redirect to the search page you have to have the class .button-search. I don't want to have a submit button.
When I add some text to the input and then when I press Enter the script should add class to the input and redirect to the Opencart search page.
Here is what you want buddy.
code: http://jsfiddle.net/webcarvers/xdt7g/1/
preview: http://jsfiddle.net/webcarvers/xdt7g/1/embedded/result/
HTML
JS
$("#inputSearch").on('keypress',function (e) {
if (e.keyCode == 13) {
$("#inputSearch").addClass("buttonSearch");
$("p").text("Class added = " + $("#inputSearch").attr("class"));
window.location.replace("http://www.yahoo.com/")
}
});
When the button is inside a form you can submit it:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
if (e.keyCode == 13) {
$("#input-search").addClass("button-search");
$(this).closest('form').submit();
}
});
});
</script>
You need to use event delegation method like below:
$('body').on('keyup','#input-search', function (e) {
if (e.keyCode == 13) {
$(this).addClass("button-search");
}
});
If all you want to do is redirect to a page with the value from the input you can do the following window.location.href = "?search=" + this.value;
Your code will be like:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
var kc = e.keyCode || e.which;
if (kc == 13) {
$("#input-search").addClass("button-search");
window.location.href = "?search=" + this.value;
}
});
});
</script>
you can change to this:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
var kc = e.keyCode || e.which;
if (kc == 13) {
$(this).addClass("button-search");// get the current context with 'this'
window.location.href = "../yoursearchpageurl?" + $(this).serialize();
}
});
});
</script>
As you mentioned that you don't have a form in your page so when you add the class to your button then just after that you can change your page url as suggested with $(this).serialize()