如何从jQuery事件处理程序中排除子元素？

Question

I am modifying an existing web page. I added a <textarea> to the page, but found that the Enter key doesn't work as expected.

After spending considerable time searching, I found the following:

$('form').keypress(function (e) {
    if (e.keyCode == 13)
        return false;
});

I need to leave as much as much of the existing functionality in place as I can. But I need to disable this for my <textarea> . (It appears mine is the only <textarea> on the page.

But how can I do this? I thought about adding .not('textarea') to the selector above. But that doesn't work because the handler is on the form, which is not a textarea.

I can I exclude <textarea> s from the filter above?

Answer 1

jsBin demo

You can simply target the inputs

$('form input').keypress(function (e) {
    if (e.which == 13) e.preventDefault(); // Don't misuse return false
});

the textarea will go on with the enter key as usual

Depends on the use-case.

If you want to be sure nothing brakes use:

$('form *:not(textarea)').keypress(function (e) {
    if (e.which == 13) e.preventDefault();
});

where * targets every children, and :not selector excludes the desired one.

here's another example:

$('form *').keypress(function (e) {
    if (e.which == 13 && this.tagName!=="TEXTAREA") e.preventDefault(); 
});

Answer 2

You can check the if the target is the textarea :

$('form').keypress(function (e) {
    if($(e.target).is('textarea')) return;
    if (e.keyCode == 13)
        return false;
});

Answer 3

the simplest way is to use on(), so you don't need to do any extra element comparing inside the event handler:

$('form').on("keypress", ":not(textarea)", function (e) {
    if (e.keyCode == 13)
        return false;
});

you use on() to watch the form, and the css selector to avoid textareas. to easily tweak later, you can blacklist other elements by tagname or class using more :not() operators sperated by commas. plus, on() is now recommended over the older single-purpose handlers anyway.

Answer 4

Add a filter inside your function like this

$('form').keypress(function (e) {
    if (e.keyCode == 13 || e.target.tagName.toLowerCase() == 'textarea')
        return false;
});