使用JavaScript处理文本区域上的回车键

Question

我在页面上有5个文本区域，我希望在第一个文本区域按下回车键时触发特定事件，在其他文本区域按下回车键时触发不同的事件。请问您如何实现这个功能？

<TextArea></TextArea>
<TextArea></TextArea>
<TextArea></TextArea>
<TextArea></TextArea>
<TextArea></TextArea>

当在第一个文本框中按下回车键时，alert('点击了文本框1');

当在其他4个文本框中按下回车键时，alert('点击了其他文本框');

可以使用jQuery实现吗？

- Abishek

Answer 1

http://jsfiddle.net/26kN7/1/

$("textarea").keyup(function(e) {
   var code = e.keyCode ? e.keyCode : e.which;
   if (code == 13) {  // Enter keycode
     if($(this).hasClass("first")) {
        alert("first ta clicked");
     } else {
         alert("the other ta clicked");
     }
   }
});

在某些版本的 FFX 中，按 <Tab> 键时，e.which 没有被设置（保持为 0），但 e.keyCode 被设置为 9。

你也可以简化成：

$("textarea").keyup(function(e){
    if((e.keyCode || e.which) == 13) { //Enter keycode
      if($(this).hasClass("first")) {
        alert("first ta clicked");
      } else {
        alert("the other ta clicked");
      }
    }
});

另一个需要注意的事情是，我喜欢在这里添加类而不是查找第一个文本区域，因为这是更通用的解决方案，可以适用于任何文本区域。

- Baz1nga

Answer 2

你可以尝试使用以下方法：

$('textarea').keypress(
    function(e){
        if (e.keyCode == 13) {
            if ($(this).index() == 0) {
                // code for first textarea;
            }
            else {
                // code for others
            }
        }
    });

JS Fiddle demo.

- David Thomas

---

event.which 规范化了 event.keyCode 和 event.charCode。建议监视 event.which 来输入键盘按键。 - Flo Edelmann

Answer 3

检查 jQuery事件对象的which属性以确定按下了哪个键。

$('textarea').first().keypress(function (e)
{
    if (e.which === 13) alert('Text Area 1 enter key pressed');
}).nextAll().keypress(function (e)
{
    if (e.which === 13) alert('Other Text Area enter key pressed');
});

- Matt Ball

---

在某些版本的FFX中，按下“<Tab>”键，e.which未设置（保持为0），但是e.keyCode已经设置（为9）。 - Baz1nga

那似乎是一个jQuery的bug，而且这也不是我们关心的重点。jQuery声称可以完全规范化事件对象，因此您不应该需要使用除event.which之外的任何其他内容。 - Matt Ball