textarea使用jquery擴展，當我點擊提交按鈕時不提交表單

Question

我希望按鈕在textarea展開時提交表單。我該怎麼做呢？

問題是，當我單擊表單中的「發佈」按鈕時，textarea被展開時，它不會提交表單，而是縮小，並且我需要再次單擊它，提交表格。

當前爲了提交帖子，我需要點擊帖子按鈕，而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擴展它不提交帖子，intead它縮小textarea回落。

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

    }); 
}) 

Answer 1

我認爲它的一些z-索引相關的問題。嘗試給 position: relative; z-index:1;提交按鈕。

如果您已爲 textarea或其任何祖先設置了 z-index，請將該值增加1並將其設置爲按鈕。

在增加高度的同時，按鈕被textarea重疊的可能性很大。 而你也提到過， while the textarea is expanded it doesnt submit the post。這可能是因爲按鈕重疊。

更新：

我得到了它

問題後，當我點擊的形式發佈按鈕，而textarea的擴展，它不提交表單，而不是它會縮小，並且我需要再次點擊它，以便提交表單。

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

}); 
}); 

Answer 2

我也有類似的問題，有一天，和正在發生的事情是，blur事件上textarea的正在發生之前瀏覽器考慮到按鈕上的click事件。

因此，按順序，我點擊按鈕，然後瀏覽器在textarea上觸發blur事件，縮小它並移動按鈕，然後瀏覽器採取點擊考慮，什麼都不做，因爲沒有了一個按鈕，我點擊。

我沒有直接解決這個問題，但是，我認爲只有在不是空的時候纔會縮小textarea（在blur事件中添加一些this.value == this.defaultValue || this.value == ''測試）。

Answer 3

如果您提交的形式和重定向到另一個頁面，你需要的是在按鍵仍然停留長enogh註冊點擊，超時解決了這個問題：

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

FIDDLE

如果在Ajax中使用它，而不是重定向，並且使textarea不響應點擊按鈕，您可以使用變量來跟蹤被點擊的元素，並且與上面的有點相同：

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); 
    } 
}); 

FIDDLE