CODEWITHSUNDEEP
javascriptjquery
Lajos Arpad
Lajos Arpad

Reputation: 77083

jQuery keypress to work normally except hitting enter

I would like to trigger a click if enter is pressed inside an input tag, but would like to have the default event strategy in all other cases. I have tried it this way:

$("#keywords").keypress(function(e) {
    if (e.charCode === 13) {
        $("#campus-search").click();
    } else {
        $("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
    }
});

It works, but I am still not satisfied, because when I click inside the input somewhere in the middle of text or press the left button, or home button and then try to type some text, it will show it at the end of the input, which is bad user-experience. Can I keep the input to work in the default way except the case when enter is pressed?

Upvotes: 1

Views: 193

Answers (5)

Robin
Robin

Reputation: 1216

I think what you are looking for is this:

$(document).ready(function () {
    $("#test").keyup(function (event) {
        if (event.keyCode == 13) {
            $("#campus-search").click();
        }
    });

    $("#campus-search").click(function () {
        console.log("BUTTON IS CLICKED");
    });
});

The input will act completely normal and everything works on default, unless when you press the enter button (keyCode = 13), then the button .click() event will be triggered.

Working Fiddle: http://jsfiddle.net/Mz2g8/3/

————

# Update: Just one hint for the code in your question, do not use charCode, as it is deprecated.

This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

(E.g. charCode does not work with FF v29.0.1)

And something different but important to know:

charCode is never set in the keydown and keyup events. In these cases, keyCode is set instead.

Source: https://developer.mozilla.org/en-US/docs/Web/API/event.charCode

Upvotes: 5

Yair Nevet
Yair Nevet

Reputation: 13013

This is what you are looking for:

HTML:

<input id="keywords" type="text" value="" />
<input id="campus-search" type="button" value="Campus Search" />

JavaScript / jQuery: 

$("#keywords").keypress(function (e) {
    if (e.charCode === 13) {
        $("#campus-search").click();
    } else {
        $("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
    }
});

$("#campus-search").on("click", function () {
    alert("Searching..");
});

Live Demo

Upvotes: 0

AstroCB
AstroCB

Reputation: 12367

The keypress function does not capture non-printing keys, such as shift, esc, delete, and enter, so the best way to go about this would be have two event handlers: one for keypress, as you have defined above, and one for keydown that checks for the charCode 13 and then performs the click() event on $(#campus-search) if that keycode is passed (by an enter press).

Demo

Upvotes: 0

Leglaw
Leglaw

Reputation: 28

I think you can eliminate the else clause entirely to get your desired result.

Look at this jsfiddle.

Upvotes: 0

undefined
undefined

Reputation: 2214

This should work 

$("#keywords").keypress(function(e) {
if (e.charCode === 13) {
    e.preventDefault(); // prevent default action of the event if the event is keypress of enter key
    $("#campus-search").click();
} else {
    $("#keywords").val($("#keywords").val() + String.fromCharCode(e.charCode));
}
});

Upvotes: 0

Related Questions