I am using jQueryUI date picker and when user clicks on a textbox and hits the enter key the current date gets populated. I want to avoid that. I have tried this:
$('#datepicker').on('keypress', function(e){
if (e.which == 13) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
With no luck
here is the link of demo /
I am using jQueryUI date picker and when user clicks on a textbox and hits the enter key the current date gets populated. I want to avoid that. I have tried this:
$('#datepicker').on('keypress', function(e){
if (e.which == 13) {
e.preventDefault();
e.stopPropagation();
return false;
}
});
With no luck
here is the link of demo https://jsfiddle/shalini456/zwjzo175/
Share Improve this question edited Mar 5, 2016 at 6:10 Shalini asked Mar 4, 2016 at 19:36 ShaliniShalini 1631 gold badge1 silver badge10 bronze badges 6- Possible duplicate of Disable enter key in JQuery ui datepicker – Charly H Commented Mar 4, 2016 at 19:52
- Possible duplicate of jQuery: Prevent enter key – Maxime Savard Commented Mar 4, 2016 at 20:04
- @CharlyH before posting my question i did try the solutions mentioned in SO but it doesnt work see jsfiddle/shalini456/zwjzo175/2 – Shalini Commented Mar 5, 2016 at 6:16
- @MaximeSavard the solution mentioned in that thread doesnt work for me :( – Shalini Commented Mar 5, 2016 at 6:16
- @Shalini look at my answer or at the solution from Bhupesh Kushwaha in the ments – Charly H Commented Mar 7, 2016 at 8:35
6 Answers
Reset to default 6Try this:
$("#datepicker").keydown(myfunction); // use keydown
function myfunction(e) {
if(e.keyCode === 13) {
e.stopPropagation();
e.preventDefault();
return false;
}
}
Some of the solutions here appear to work because they throw an exception of some kind.
There are two things which seem to make it work without throwing an exception.
As mentioned by "Charly H" the keydown binding must happen before calling datepicker.
Then in the keydown handler call e.stopImmediatePropagation(). E.g.
$('#datepicker').bind('keydown',function(e){
if (e.which == 13)
e.stopImmediatePropagation();
})
.datepicker();
Fiddle: https://jsfiddle/8fyvh8wd/18/
Try this :
$('#datepicker').keypress(function(e){
if (e.keyCode == 10 || e.keyCode == 13) //10 is Line Feed and 13 is Carriage Return
e.preventDefault();
});
If you cant disable the enter keypress there is a work around for this... you can just remove the focus from "#datepicker" check the following updated fiddle https://jsfiddle/shalini456/zwjzo175/4/
jQuery
$(document).ready(function(){
$( "#datepicker" ).datepicker();
$("#datepicker").on('click', function(){
$("#datepicker").blur();
});
});
I've shortened down the solution of Bhupesh Kushwaha, which he provided in the ments
$(function() {
$("input").bind('keydown', function (e) {
if (event.which == 13) {
$(this).trigger(e);
return false;
}
}).datepicker();
});
This worked for me: https://jsfiddle/zwjzo175/27/
guys,
I know that this might be too late, but the only solution that worked for me was the one from "Charly H", where he put the code binding the input text before the declaration of the datepicker.
I guess the reason is that the bubble propagation and the priority of it.
The code would look like this:
$(function() {
$("input").bind('keydown', function (e) {
if (event.which == 13) {
e.preventDefault();
e.stopPropagation();
$(this).trigger(e);
return false;
}
}).datepicker();
});