jquery - 在文本区域中按 Enter 时提交表单

标签 jquery forms

我一直在尝试各种方法来获取在按下回车键时提交的表单。我知道它可以与输入字段一起使用,但因为这将是一条注释,所以它需要是一个文本区域。

这就是我目前使用按钮提交表单的内容。

$('.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 等点击 Enter。

我已经尝试过这样的方法,但似乎没有效果。

$('.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 函数来阻止表单使用文本区域中的当前默认值提交,那就太棒了。目前,根据文本区域的设置方式,如果您单击“提交”,它将提交在此处写下您的评论...

谢谢

编辑:解决方法可以是...像平常一样有一个提交按钮,但将其隐藏,当您按回车键时,它会触发对该按钮的调用?但是然后...我遇到了同样的问题,即 Enter 在文本区域中除了换行之外什么都不做...

最佳答案

我认为您还希望让用户能够使用shift 转到新行。

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

请参阅:http://jsfiddle.net/almirsarajcic/Gd8PQ/

这对我有用。

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

关于jquery - 在文本区域中按 Enter 时提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13103191/

相关文章:

Jquery 转到这个 href

javascript - 自定义 wpDataTables JS - 正面和负面

php - Symfony2-表单错误(对于整个表单,不是单个字段)不显示

html - 如何水平居中DIV

javascript - 当光标离开一定距离时,图像是否可能不移动到光标?

jquery - 使用 CSS 和 jQuery 的移动菜单

jquery - URL片段: a leading slash in your hash url - good or bad?

C# 属性 : Font and Color Change on the Fly

php - 数据表中基于日期的搜索功能

每次字段更改时javascript验证表单