在文本区域按下回车键时提交表单

Question

我一直在尝试各种方法，以便在按下回车键时提交表单。我知道对于输入字段可以这样做，但由于这将是一个评论，所以需要使用文本区域。

以下是我当前使用的用于通过按钮提交表单的代码：

$('.messageSubmit').live('click', function(){
    var name = $(this).siblings('.messageTextarea').val();
    var theid = $(this).attr('data-the_id');
    var dataString = name;

    $.ajax({
        dataType: 'json',
        url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?"+hash,
        type: "POST",
        data: "text="+dataString,
        success: function(data) {
            // finish load
            console.log(data, dataString, 'fail');
        },
        error: function(data) {
            var username = JSON.parse(localStorage.getItem('iguser'));
            var profilepic = JSON.parse(localStorage.getItem('iguserimg'));
            //console.log(data, dataString, 'succ');

            $('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>');

            $('.messageTextarea').val(''); // Remove comment from TextArea
        }
    });
    return false;
});

它的功能和预期一样。我想去掉提交按钮，只需在用户按下回车键时提交表单即可。我知道有些人建议不要这样做，但这个网站的用户通常会在Facebook等地方按回车键。

我已经尝试过一些方法，但似乎都不起作用。

$('.messageTextarea').keydown(function() {
    if (event.keyCode == 13) {
        this.form.submit();
        return false;
     }
});

这是我的表单代码。

<form>
   <textarea class="messageTextarea" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;">Write your comment here...</textarea>
    <input type="submit" data-the_id="' + theid + '" name="submit" class="messageSubmit" id="submit_btn" value="Submit your comment">
 </form>

任何帮助都将是巨大的。此外，如果有人知道如何添加一个if函数以防止表单提交当前Textarea中的默认值，那就太好了。目前，以现在的TextArea设置，如果你只是点击提交，它会提交“在这里写下你的评论...”

谢谢。

编辑：是否可以通过一个按钮来提交，就像平常一样，但把它隐藏起来，当你按Enter时它会触发该按钮的调用？但是...我会遇到相同的问题，在TextArea中按Enter键除了换行什么也不会做...

- Ryan

---

修改常见元素的功能通常不是一个好主意。用户会期望textarea允许使用回车键。但是，Stack Overflow确实这样做了...需要谨慎对待。 - Erik Funkenbusch

这是我最初解决这个问题的方式，但此站点上唯一的用户将是Instagram和Facebook的用户。 我想他们看到评论字段时会知道该怎么做。 - Ryan

Answer 1

我认为您也希望让用户能够使用shift键换行。

$('.messageTextarea').on('keyup', function(e) {
    if (e.which == 13 && ! e.shiftKey) {
        // your AJAX call
    }
});

看这个：http://jsfiddle.net/almirsarajcic/Gd8PQ/

这对我有用。

此外，您需要删除当前的提交按钮。

- Almir Sarajčić

---

我觉得这很接近了，我也看到 AJAX 应该在函数中，但是它还是不起作用... - Ryan

哇，这太棒了！谢谢。 - Bluedayz

比实际答案简单整洁得多 +1 - Kyle

太好了！还有<Shift>+<Enter>可以换行的额外好处。 - Ashil John

Answer 2

试试这个jsfiddle

HTML：

<form>
   <textarea class="messageTextarea">Write your comment here...</textarea>

 </form>​

JS:

       $('.messageTextarea').keydown(function(event) {
    if (event.keyCode == 13) {
        $(this.form).submit()
        return false;
     }
}).focus(function(){
    if(this.value == "Write your comment here..."){
         this.value = "";
    }

}).blur(function(){
    if(this.value==""){
         this.value = "Write your comment here...";
    }
});

$("form").submit(function(){
       var name = $(this).siblings('.messageTextarea').val();
    var theid = $(this).attr('data-the_id');
    var dataString = name;

    $.ajax({
        dataType: 'json',
        url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?",
        type: "POST",
        data: "text="+dataString,
        success: function(data) {
            // finish load
            console.log(data, dataString, 'fail');
        },
        error: function(data) {
            var username = JSON.parse(localStorage.getItem('iguser'));
            var profilepic = JSON.parse(localStorage.getItem('iguserimg'));
            //console.log(data, dataString, 'succ');

            $('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>');

            $('.messageTextarea').val(''); // Remove comment from TextArea
        }
    });

    return false;
});
​
​

​

- Anoop

---

所以这在fiddle上可以运行.. 但我无法让它在我的代码中工作。我应该把我的AJAX放在If语句里吗？ - Ryan

只有在删除输入按钮后才能正常工作。尝试删除输入按钮。 - Anoop

但是 Ajax，这个还应该放在这里吗？ - Ryan

是的，但它仍然不起作用。我必须确保这不只是用户错误。除了表单以外，我的所有代码都在一个函数中，我正在页面上回调该函数。这会影响它吗？ - Ryan

我更新了我的代码，请再看一下。对不起，我没有明白你试图说什么。 - Anoop

这似乎有效。我只需要稍微调整一下获取 Instagram 数据的当前代码，使其能够接受这个。我会把这个标记为一个答案。谢谢。 - Ryan

Answer 3

试着用这种方式

<form method="post" action="">
    <textarea></textarea>
</form>

<script type="text/javascript" src="./lib/js/jquery/jquery-1.8.1.min.js"></script>

<script type="text/javascript">
    jQuery('textarea').keydown(function(event) {
        if (event.keyCode == 13) {

            this.form.submit();
            return false;
         }
    });
</script>

我进行了测试，它可以工作。

我只向函数头部添加了参数event。

- bukart

---

我也尝试过这种方式，它会像回车键一样添加一个新的换行符。 - Ryan

你看过函数头里的参数event吗？ - bukart

是的，我看到了。它仍然作为一个回车键而不是提交键。 - Ryan

给我一会儿，我会检查这个。 - bukart

我还是搞不定... 我已经把这段代码放在注释函数外面了，里面也试过了，甚至把表单提交改成了控制台日志，但还是不行... - Ryan