按下回车键时获取输入文本的值答案

【问题标题】：Get the value of input text when enter key pressed按下回车键时获取输入文本的值
【发布时间】：2014-01-26 17:22:47
【问题描述】：

我正在尝试这个：

<input type="text" placeholder="some text" class="search" onkeydown="search()"/>
<input type="text" placeholder="some text" class="search" onkeydown="search()"/>

用一些javascript来检查是否按下了回车键：

function search() {
    if(event.keyCode == 13) {
        alert("should get the innerHTML or text value here");
    }
}

目前这工作正常，但我的问题是如何获取文本字段中的值，我正在考虑将引用“this”传递给函数，或者如果他们有 id，那么我可以使用 ID，但后来我看不出我如何区分输入的是哪一个，让我再次回到同一个问题......

【问题讨论】：

你可以通过this获取当前目标/文本字段的this.value！
"应该得到innerHTML输入没有innerHTML...
是的，我应该先尝试通过这个，不过感谢您的确认。

标签： javascript html input keycode

【解决方案1】：

试试这个：

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>  
<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

JS 代码

function search(ele) {
    if(event.key === 'Enter') {
        alert(ele.value);        
    }
}

DEMO Link

【讨论】：

首先我认为其中有一个错误，然后我尝试：完美运行，是我能找到的最好的 vanilly 方法。谢谢。
对于任何可能会发现此问题的人来说只是一个快速更改，在 HTML5 中它应该是 onkeypress 而不是 onkeydown 和 event.keyCode == 13 for 'Enter' 键。
另外，在 HTML5 中，'search(this)' 应该是 'search(event)'，从中读取 'ele.keyCode === 13' 以获取是否按下了 Enter。关键字“this”不起作用。

【解决方案2】：

$("input").on("keydown",function search(e) {
    if(e.keyCode == 13) {
        alert($(this).val());
    }
});

jsFiddle 示例：http://jsfiddle.net/NH8K2/1/

【讨论】：

不是 jQuery 版本吗。但我猜他想要平面 javascript 中的解决方案。
或者使用 jQuery，这也是一个很好的答案，谢谢，我选择了普通的 Javascript，但这同样很棒，谢谢 :)
对不起，当我说“或使用 jQuery”时，我的意思是每个人都在提供一个纯 javascript 解决方案，这是一个 jquery 解决方案，以开玩笑的语气......

【解决方案3】：

只使用事件对象

function search(e) {
    e = e || window.event;
    if(e.keyCode == 13) {
        var elem = e.srcElement || e.target;
        alert(elem.value);
    }
}

【讨论】：

【解决方案4】：

你不应该在你的 HTML 中放置 Javascript 代码，因为你给这些输入一个类（“搜索”），没有理由这样做。更好的解决方案是这样做：

$( '.search' ).on( 'keydown', function ( evt ) {
    if( evt.keyCode == 13 )
        search( $( this ).val() ); 
} );

【讨论】：

【解决方案5】：

收听change 事件。

document.querySelector("input")
  .addEventListener('change', (e) => {
    console.log(e.currentTarget.value);
 });

【讨论】：

【解决方案6】：

类似的东西（未经测试，但应该可以）

将此作为 Html 中的参数传递：

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

并alert传入搜索函数的参数值：

function search(e){
  alert(e.value);
}

【讨论】：

【解决方案7】：

    const $myInput = document.getElementById('myInput');

    $myInput.onkeydown = function(event){
        if(event.key === 'Enter') {
            alert($myInput.value);        
        }
    }

【讨论】：