I have a single text field and a button. The button calls a function called validate(). It currently only works if you click the button, and I'm trying to change it to take keyboard input using 'enter' on keyboard. I have written the following from tutorials, but it doesn't work - any pointers?
<input type="text" name="textField" onkeypress="handle(event)" onfocus="clearT()" />
function handle(e){
if(e.keyCode === 13){
validate();
}
You can call the onkey function by using getElementById onkeydown instead of putting a onkeypress function on the input field itself.
document.getElementById('my_id').onkeydown = function(e){
if(e.keyCode == 13){
validate();
}
};
function validate(){
alert('hi');
}<input type="text" id="my_id" name="textField" onfocus="clearT()" />
<script>
function handle(e)
{
if(e.keyCode === 13)
{
validate();
}
}
function validate()
{
alert("hello");
}
</script>
<body>
<input type="text" name="textField" onkeypress="handle(event)" />
</body>The code you're using is fine, but I assume you have a syntax error in handle function--missing } for if statement. And, it's always a good idea to check for both keyCode and which.
function handle(e){
var key = e.keyCode || e.which;
if(e.keyCode === 13){
e.target.blur(); // blur
console.log('proceeding to validate()');
}
}
function clearT(){
}<input type="text" name="textField" onkeypress="handle(event)" onfocus="clearT()" />
.blur() makes the element unfocusedYou could also move the validation to the form's onsubmit event. This approach removes the need to capture and interrogate keystrokes. As follows:
Wire up the form's onsubmit event to a javascript function:
HTML
<form id="world" name="world" onsubmit="validate(event)">
<input type="text" name="textField" />
<input type="submit" value="Submit" />
</form>
JavaScript
function validate(event) {
event.preventDefault();
console.log('This is validate');
}
So when the HTML form has focus and you either click on Submit or press the Enter key the validate method gets called, and works with multiple forms on a page. Seems to me to be a cleaner solution as it uses the browsers default behaviours, instead of writing (rewriting?) keystoke management code.
