在 contenteditable 区域按“enter”触发按钮答案

【问题标题】：Pressing "enter" in contenteditable area to trigger button在 contenteditable 区域按“enter”触发按钮
【发布时间】：2014-04-30 21:11:48
【问题描述】：

我正在尝试创建一个问答互动，用户可以在其中输入食物并查看我的朋友是否过敏。逻辑功能，但现在人们抱怨说，当他们在输入后点击“输入”时，答案中的行会中断，而不是触发按钮。电话用户发现这尤其令人沮丧，因为它需要额外点击才能离开键盘，然后单击页面上的按钮。

这里是jsfiddle。

我试过这个可以停止换行但仍然没有提交答案：

$("#test").keydown(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $("#test").submit();
        }
    });

【问题讨论】：

你不能“提交”一个 div。您可以提交form，而不是 div :)
我使用 div 的原因是可编辑区域的行为类似于句子的其余部分（即 ? 跟随输入的长度，文本区域周围没有笨拙的轮廓等）。有没有办法在我的 div 中提交文本而无需使用表单并破坏我的格式？
您可以使用输入字段并使用 css 对其进行相应的样式设置。

标签： javascript jquery button submit enter

【解决方案1】：

您可以在提交之前将DIV 的 HTML 内容放在隐藏字段中：

function doSubmit(){
    var div = document.getElementById('#test');
    var hidden = document.getElementById('#hidden');
    hidden.value = div.innerHTML;

    // finish submitting the form, e.g. document.forms['myform'].submit();
}

【讨论】：