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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过点击“Enter”从textarea提交数据相关的知识,希望对你有一定的参考价值。

我有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键只会在文本中插入新行。如果您想要该行为,请使用普通文本字段

以上是关于通过点击“Enter”从textarea提交数据的主要内容,如果未能解决你的问题,请参考以下文章

将换行符添加到 textarea 而不是提交表单

在 Bootstrap 模式窗口中单击 Enter 并点击提交按钮时提交表单数据

提交表单问题... Enter 键

Textarea 中回车换行,提交数据后,在网页中显示的是没换行的样子,求解

防止“输入”提交表单,但允许在 textarea 字段(jQuery)[重复]

Angular2使textarea按Enter而不添加新行