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

Question

我正在尝试这个:

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

使用一些 JavaScript 来检查 Enter 键是否被按下：

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

目前这个方法运行良好，但我的问题是如何获取文本字段中的值。我考虑将一个引用“this”传递给函数，或者如果它们有ID，则可以使用ID，但是我不知道该如何区分已经输入的值，这让我陷入了同样的问题...

- user2405469

---

你可以传递 this 并获取当前目标/文本字段的 this.value！ - Dhaval Marthak

应该获取innerHTML，输入框没有innerHTML... - epascarello

是的，我应该先尝试一下传递这个参数，不过还是谢谢你的确认。 - user2405469

Answer 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);        
    }
}

演示链接

- Dhanu Gurung

---

起初我以为它有错误，然后我尝试了一下：完美地工作，并且是我能找到的最好的基础方法。谢谢。 - Xan-Kun Clark-Davis

只是一个快速更改，针对那些可能偶然发现这个问题的人，HTML5中应该使用onkeypress而不是onkeydown，并且使用event.keyCode == 13表示“Enter”键。 - Hokhy Tann

在HTML5中，“search（this）”应改为“search（event）”，从中可以读取“ele.keyCode === 13”以确定是否按下Enter键。关键字“this”不起作用。 - DocWeird

onkeypress 和 keyCode 都已经被弃用了... https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event - Jiří

Answer 2

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

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

- Alexander

---

这不是jQuery版本。但我猜他想要用纯JavaScript的解决方案。 - Dhanu Gurung

或者使用jQuery，那也是一个很好的答案，谢谢。我选择了普通的Javascript，但这同样很棒，谢谢 :) - user2405469

抱歉，当我说“或使用jQuery”时，我的意思是每个人都提供了一个纯JavaScript的解决方案，而这是一个jQuery的解决方案，带着一种玩笑的口吻... - user2405469

Answer 3

仅使用事件对象

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

- epascarello

---

请精确地描述此函数的功能。 - Dominic Cerisano

Answer 4

监听change事件。

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

- Daniel De León

Answer 5

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

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

- Юрий Светлов

Answer 6

您不应该将Javascript代码放在HTML中，因为您给这些输入框添加了一个类（“search”），所以没有理由这样做。更好的解决方案是像这样做：

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

- Gabin

Answer 7

像这样（未经测试，但应该可以工作）

将其作为参数传递到 Html 中：

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

并且警报搜索函数传入的参数值：

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

- Tim Sommer

Answer 8

  const searchInput =  document.getElementById('urlInput');

searchInput.addEventListener('keydown',(e)=>{
    console.log(e.key)
    if(e.key == 13){
        const elem =  e.target
        console.log(elem.value);
    }
})

<input id="urlInput" type="text" placeholder="some text" class="search"/> 
  

- Keep It Simple