通过在没有 jQuery 全局事件的文本框中按 Enter 来调用 JavaScript 函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5545682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:34:28  来源:igfitidea点击:

Call a JavaScript function by hitting enter in a textbox without global events of jQuery

javascripthtmlajaxonkeypress

提问by Paragon

I am working on a project with the goal of learning, and I am avoiding jQuery thus far to learn as much JavaScript as possible. I have been successfully using onkeypress to determine whether or not enter was hit in a textbox or textarea, but after adding a searchbar on me website, I discovered that events like onkeypress are global (ie. hitting enter in the search bar activates my 'send message' textarea).

我正在从事一个以学习为目标的项目,到目前为止我正在避免使用 jQuery,以尽可能多地学习 JavaScript。我已经成功地使用 onkeypress 来确定是否在文本框或文本区域中输入了输入,但是在我的网站上添加搜索栏后,我发现像 onkeypress 这样的事件是全局的(即在搜索栏中点击输入激活我的发送消息”文本区域)。

I am also using AJAX, and thus I do not want a simple form submit. I am also hoping to use a textarea, since I am after multiple lines (so that more text is visible).

我也在使用 AJAX,因此我不想要一个简单的表单提交。我也希望使用 textarea,因为我在多行之后(这样可以看到更多的文本)。

Under these constraints, is this reasonable to do without using jQuery? If so, how can I do it? Other answers on the site simply point to jQuery.

在这些限制下,不使用 jQuery 是否合理?如果是这样,我该怎么做?网站上的其他答案只是指向 jQuery。

Thanks,

谢谢,

Paragon

模范

Edit: I was asked for code, so here is the relevant HTML and JavaScript. Here is one of the inputs:

编辑:我被要求提供代码,所以这里是相关的 HTML 和 JavaScript。这是输入之一:

<input type="text" id="search" name="search" onkeypress="return activate(event, this.value);"/>

Here is the javascript to go along with it:

这是与之配套的javascript:

function activate(e, message)
{   
    if (isNotEnter(e))
    {   
        return true;
    }   
    else // ie. enter was pressed
    {   
        // only proceed to search() if message is not empty
        if (message.length >= 1)
        {   
            search();
        }   
        return false;
    }   
}

And the function isNotEnter():

和函数 isNotEnter():

function isNotEnter(e)
{   
    if (e.keyCode == 13) 
    {   
        return false;
    }   
    else
    {   
        return true;
    }   
}

采纳答案by alex

Sounds like you are capturing the key event on document, not your input element specifically.

听起来您正在捕获 上的关键事件document,而不是专门针对您的输入元素。

So find something like document.onkeypress = function() { ... }and replace with document.getElementById('your-input').onkeypress = function() { ... }.

所以找到类似的东西document.onkeypress = function() { ... }并替换为document.getElementById('your-input').onkeypress = function() { ... }.

If you can't find that code, you may be using addEventListener, so find document.addEventListener('keypress', function() { ... }, false);

如果你找不到那个代码,你可能正在使用addEventListener,所以找到document.addEventListener('keypress', function() { ... }, false);

Update

更新

You want to avoid inline event handlers. Google addEventListener()(and you will also see why we need attachEvent()for < IE9).

您想避免使用内联事件处理程序。谷歌addEventListener()(你也会明白为什么我们需要attachEvent()< IE9)。

Also, you generally don't want to name functions as negating something, e.g. your example isNotEnter(). You should flip its function around and call it isEnter(), so you can use the negation operator for is not enter, e.g. ! isEnter().

此外,您通常不想将函数命名为否定某些东西,例如您的 example isNotEnter()。你应该翻转它的函数并调用它isEnter(),这样你就可以使用否定运算符 for is not enter,例如! isEnter()

回答by Porco

You should use jquery because it is awesome, easy to learn, gets rid of browser issues, etc.

您应该使用 jquery,因为它很棒、易于学习、摆脱了浏览器问题等。

If you are totally against it though, it can be done with pure JS. It would help if you show your code, but you are probably binding the onkeypress event to the document when you should be binding it to the input.

如果你完全反对它,它可以用纯 JS 来完成。如果您显示代码会有所帮助,但您可能在将 onkeypress 事件绑定到文档时将其绑定到输入。

$("#search").keypress(function()
{
//do function here, use this to refer to the element
});