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

时间:2009-04-25 20:49:45

标签: javascript html forms

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

6 个答案:

答案 0 :(得分:26)

你可以使用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;
 }

答案 1 :(得分:15)

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

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

答案 2 :(得分:13)

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

他们从代码的角度介绍的问题类似于您正在尝试的内容,即按下的确切物理键不一定与用户输入的实际输入相对应。

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

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

如果我在webkit中实现了这个内存,那么有必要让keyCown上的keyCode为229,用于输入IME中的所有键(用于与IE进行比较) - 但我不记得keyUp的行为是什么。 / p>

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

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

答案 3 :(得分:1)

这是我的解决方案:

在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*/}" />

答案 4 :(得分:1)

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

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

答案 5 :(得分:-1)

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