通过点击“Enter”从textarea提交数据

Posted 2021-03-27

我有JS的动态网页。有一个<textarea>和一个发送按钮，但没有<form>标签。如何在<textarea>中按Enter键时，如何使提交按钮触发并清除<textarea>？

答案

你可以使用textarea的keyup处理程序（虽然我会反对它*）。

[SomeTextarea].onkeyup = function(e){
  e = e || event;
  if (e.keyCode === 13) {
    // start your submit function
  }
  return true;
 }

*为什么不为此使用文本输入字段？ Textarea特别适用于多行输入，即单行输入的文本输入字段。使用输入处理程序可以压缩多行输入。我记得曾经使用它一次用于XHR（又名AJAX）聊天应用程序（因此textarea的行为类似于MSN输入区域），但是使用CTRL-enter键重新启用了多行输入。这可能是你的想法吗？听众会像这样扩展：

[SomeTextarea].onkeyup = function(e){
  e = e || event;
  if (e.keyCode === 13 && !e.ctrlKey) {
    // start your submit function
  }
  return true;
 }

另一答案

在textarea中输入Enter会插入换行符，而不是提交父表单;即使使用常规表单标签，这也不会以这种方式工作。

尝试解决此问题是不可取的，因为它会违反用户对文本区域控件行为的期望，无论是在其他网站中还是在其平台上的其他应用程序中。

另一答案

@ Shog9建议我将我的答案复制到这个问题的重复版本：忽略的一个问题是运行输入法（编辑）的用户 - 例如。非拉丁文本输入。我熟悉的IME是OSX上的Kotoeri Hiragana IM，但是还有很多其他的日语（Kotoeri单独有多种不同的输入模式，至少还有一种主要的称为ATOK），除了hangul的模式，传统和简体中文，以及许多其他不太知名的语言。这些输入法存在于所有主要平台上（尤其是Win，Mac和Linux）。

从类似于您正在尝试的代码的角度出现的问题是，确切的物理按键不一定与用户输入的实际输入相对应。

例如，默认情况下在平假名下输入字符序列toukyou<enter>将生成字符串とうきょう，请注意，结果文本中没有<enter>，因为enter确认组合文本。但除此之外，输入的实际字符序列会随着输入的输入而变化：

t // t
と // to
とう // tou
とうk // touk
とうky // touky
とうきょ // toukyo
とうきょう // toukyou

如果我在webkit中实现了这个内存，那么有必要在keyDown上为keyCown设置keyCode为229，用于输入IME中的所有键（用于与IE进行比较） - 但我不记得keyUp的行为是什么。

值得注意的是，在某些IME中，您不一定会收到keydowns，keypress或keyup。或者您会收到多个。或者他们都是在输入结束时一起发送的。

一般来说，这是目前DOM事件实现的一个非常不洁净的部分。

另一答案

这是我的解决方案：

在javascript中：

function isEnterPressed(e){
var keycode=null;
if (e!=null){
    if (window.event!=undefined){
        if (window.event.keyCode) keycode = window.event.keyCode;
        else if (window.event.charCode) keycode = window.event.charCode;
    }else{
        keycode = e.keyCode;
    }
}
return (keycode == 13);}

在html中：

<input type="text" onkeyup="if(isEnterPressed(event)){/*do something*/}" />

另一答案

您是否有理由不使用表单包装器？

$('#input_id').keypress(function(e){
    if(e.which == 13){
        $('#form_id').submit();
        return false; //prevent duplicate submission
    }
});

另一答案

textarea用于允许用户输入多行文本，因此按Enter键只会在文本中插入新行。如果您想要该行为，请使用普通文本字段