Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Call a function when the enter button is pressed via Javascript

I have a problem, I want to call a function inside a textbox, when I press enter, this is my code

<input  type="text" value="DIGITE O LOCAL" onclick="this.select()" size="20" id="endereco">

I want to put something like onenterpress="doSomething()"

How can I do this ?

like image 487
Fred Vicentin Avatar asked Sep 28 '12 15:09

Fred Vicentin


People also ask

How do you call a function on pressing Enter in JavaScript?

To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery. keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.

How do you call a function in press Enter?

addEventListener("keydown", function (e) { if (e. code === "Enter") { //checks whether the pressed key is "Enter" validate(e); } }); function validate(e) { var text = e. target. value; //validation of the input... }

How do you call a function after clicking the button?

Method 1: Use addEventListener() Method Get the reference to the button. For example, using getElementById() method. Call addEventListener() function on the button with the “click” action and function passed as arguments.

How do you check if Enter is pressed JavaScript?

In plain JavaScript, you can use the EventTarget. addEventListener() method to listen for keyup event. When it occurs, check the keyCode 's value to see if an Enter key is pressed.


3 Answers

If you want to use obtrusive Javascript:

<input type="text" value="DIGITE O LOCAL" onclick="this.select()" 
onKeyDown="if(event.keyCode==13) alert(5);" size="20" id="endereco">

Handling this unobtrusively:

document.getElementById('endereco').onkeydown = function(event) {
    if (event.keyCode == 13) {
        alert('5');
    }
}

Your best choice is to use the latter approach. It will aid in maintainability in the long run.

Reference: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

like image 108
Daniel Li Avatar answered Oct 01 '22 17:10

Daniel Li


Daniel Li's answer is the slickest solution, but you may encounter a problem with IE and event.keyCode returning undefined, as I have in the past. To get around this check for window.event

document.getElementById('endereco').onkeydown = function(event){
    var e = event || window.event;
    if(e.keyCode == 13){
        alert('5');
    }
}​
like image 23
2stripe Avatar answered Oct 01 '22 17:10

2stripe


HTML

<input  type="text" value="DIGITE O LOCAL" onkeypress="doSomething(this, event)" onclick="this.select()" size="20" id="endereco">

JS

function doSomething(element, e) {
    var charCode;

    if(e && e.which){
        charCode = e.which;
    }else if(window.event){
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13) {
        // Do your thing here with element
    }
}
like image 38
AlienWebguy Avatar answered Oct 01 '22 16:10

AlienWebguy