Отправка формы при нажатии enter в Textarea

Я пробовал различные методы, чтобы получить форму для отправки при нажатии клавиши enter. Я знаю, что это работает с полем ввода, но поскольку это будет комментарий, он должен быть текстовой областью.

Это то, что я в настоящее время имею для формы, чтобы отправить с помощью кнопки. 

$('.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;
});

Он работает так, как и должен. Я хочу удалить кнопку Отправить и просто отправить форму, когда пользователь нажимает клавишу enter. Я знаю, что некоторые люди советуют против этого, но пользователи на этом сайте будет использоваться для нажатия enter из 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 настроен сейчас, если вы просто нажмете submit, он отправит написать свой комментарий здесь...

Спасибо

EDIT: может ли быть обходной путь... Есть кнопка для отправки, как обычно, но она скрыта, и когда вы нажимаете enter, она вызывает вызов этой кнопки? Зато... Я столкнулся бы с той же проблемой ввода, не делая ничего в текстовой области, за исключением прорыва в новую строку...

3 6
forms jquery

3 ответа:

Попробуйте это 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;
});
​
​

12

Я думаю, что вы также хотели бы дать пользователям возможность перейти на новую строку с помощью shift.

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

Смотрите это: http://jsfiddle.net/almirsarajcic/Gd8PQ/

Это сработало для меня.

Кроме того, вам нужно удалить кнопку отправки, которая у вас в данный момент есть.

26

Попробуйте сделать это следующим образом

<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 в заголовок функции

3