I would like that when entering a text field, it will detect the press of the enter key to be able to execute a function.
This is the field:
<input type="text" id = "txtConvBusFch" class="form-control datepicker" placeholder="Desde Fecha">
$('#txtConvBusFch').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
});
Try the option without jQuery:
<head>
<script type="text/javascript">
function onKeyUp(event) {
var keycode = event.keyCode;
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
}
</script>
</head>
<body>
[...]
<input onkeyup="onKeyUp(event)" type="text" id = "txtConvBusFch" class="form-control datepicker" placeholder="Desde Fecha">
[...]
</body>
}
According to this answer , sometimes there are compatibility issues, because the code of some keys may vary, depending on the version of browser.
In that case, using keyup seems to be the best option.
Also, you could obtain the value to be compared by using keyCode or wich , like this:
var keycode = e.keyCode || e.which;
I'll give you two examples, one with jQuery and the other with Javascript.
Try this way.
$("#txtConvBusFch").on('keyup', function (e) {
var keycode = e.keyCode || e.which;
if (keycode == 13) {
alert("Enter!");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id = "txtConvBusFch" class="form-control datepicker" placeholder="Desde Fecha">
var elInput = document.getElementById('txtConvBusFch');
elInput.addEventListener('keyup', function(e) {
var keycode = e.keyCode || e.which;
if (keycode == 13) {
alert("Enter!");
}
});<input type="text" id="txtConvBusFch" class="form-control datepicker" placeholder="Desde Fecha">This code works what happens with this problem is easy, it is not a compatibility problem what happens is that when the script is executed the DOM tree has not yet been loaded, it happens like this: You open the page. The HTML is loaded, the head is read, the goals and other labels are read, the famous script is reached, the script says that there is a (something, it can be an input or a simple div, whatever it is). ..) with an identifier ('#txtConvBusFch') and associated with an event ('keypress') I will immediately look for it in the body but see that the body (body) of the html has not yet been loaded, which means that an error, the input tag does not exist.
The browser's javascript interpreter keeps reading that this event will search to know if the pressed key is the 'Enter' key (key 13) and will launch in case the event is the expected one 'alert' with a message, end of the script.
Now we start making the DOM tree, all the divs, paragraphs, images and INPUT's elements are created ... Now there is the input you are talking about and that is when the script could affect the input. How is it done? There are several ways.
Mainly the problem is that the DOM is not loaded before the script, this is solved for example:
1-. Put the script tag not in the header but at the end of the body, before you had it written like this (roughly):
<html>
<head>
<script></script>
</head>
<body>
<input/>
</body>
</html>
Ahora ponlo así:
<html>
<head>
</head>
<body>
<input/>
<script></script>
</body>
</html>You'll see that it works perfectly.
2-. I see that you use jQuery, to make the script always run when the document is ready you just have to wrap it with this and you can leave it in the header and it will work fine too.
<script>
$(function(){
//Aquí va tu código.
})
</script>
3-. You can put your code without jQuery in the header inside this that what it will do is execute the code inside it when the DOM is loaded.
window.onload = function ()
{
//Aquí va tu código.
}