0

textareaが展開されている間にボタンがフォームを送信するようにしたい。どうすればこれを行うことができますか？

問題は、フォームの[投稿]ボタンをクリックすると、テキストエリアが展開されているときにフォームが送信されず、代わりに縮小されて、小さいときにもう一度クリックしてフォームを送信する必要があることです。

現在、投稿を送信するには、テキストエリアが展開されていないときに投稿ボタンをクリックする必要があります。

HTML

<form method='POST' action='elsewhere.php'>
    <textarea id="textarea" style="width:550px; height:25px;"></textarea>
    <input class="btn" type='submit' value='Post'/>                             
</form>

jquery

現在、テキスト領域をクリックすると高さが拡大し、他の場所をクリックすると縮小します。投稿ボタンをクリックすると、テキストエリアが展開されている間は投稿が送信されませんが、テキストエリアが縮小されて元に戻ります。

$('#textarea').click(function(){
    $(this).css('height','100px')
    $(this).html('');
    $(this).blur(function(){
        $(this).css('height','25px')

    });
})
4

3 に答える 3

3

フォームを送信して別のページにリダイレクトする場合、必要なのはボタンがクリックを登録するのに十分な時間静止していることだけです。タイムアウトはその問題を解決します。

$('#textarea').on({
    focus: function() {
        $(this).css('height','100px').html('');
    },
    blur: function() {
        var self = this,
            T = setTimeout(function() {$(self).css('height','25px') }, 200);
    }
});

フィドル

これをAjaxで使用し、リダイレクトせず、テキストエリアがボタンのクリックに応答しないようにする場合、変数を使用して、クリックされた要素を追跡し、上記と同じことを行うことができます。

var elm;

$('.btn').on('click', function(e) {
    elm = e.target;
    e.preventDefault();
    //do ajax stuff
});

$('#textarea').on({
    focus: function() {
        $(this).css('height','100px').html('');
    },
    blur: function() {
        var self = this,
            T = setTimeout(function() {
                if ($(elm).attr('class') != 'btn') $(self).css('height','25px');
            }, 200);
    }
});

フィドル

于 2012-05-13T21:15:07.170 に答える
1

z-index関連の問題だと思います。position: relative; z-index:1;送信ボタンを押してみてください。

またはその祖先のいずれかを設定z-indexしたtextarea場合は、その値を 1 つ増やしてボタンに設定します。

ボタンの高さを増やすと、ボタンがテキストエリアに重なる可能性があります。 そして、あなたもそれについて言及しましたwhile the textarea is expanded it doesnt submit the post. ボタンが重なっているせいかもしれません。

アップデート：

後で手に入れた

問題は、フォームの [投稿] ボタンをクリックすると、テキストエリアが展開されているときにフォームが送信されず、代わりに縮小され、フォームが小さいときにもう一度クリックしてフォームを送信する必要があることです。

$('#textarea').click(function(){
$(this).css('height','100px')
$(this).html('');
$(this).blur(function(){
    if(this.value === ''){
        $(this).css('height','25px')
    }

});
});
于 2012-05-13T21:12:12.980 に答える
0

先日同様の問題が発生しましたが、ブラウザがボタンのイベントを考慮する前blurに、テキストエリアのイベントが発生していました。click

したがって、順番に、ボタンをクリックしてから、ブラウザがblurテキストエリアでイベントを発生させ、ボタンを縮小して移動しました。次に、クリックしたボタンがなくなったため、ブラウザはクリックを考慮して何もしませんでした。 。

ただし、問題を直接修正することはしませんでしたが、テキストエリアが空でない場合にのみテキストエリアを縮小することにthis.value == this.defaultValue || this.value == ''しました（イベントにテストを追加しblurます）。

于 2012-05-13T21:11:27.933 に答える