如何在textarea onblur上保持提交按鈕可見和可執行

我有一個<div id="comment_posting_holder">標籤，它包含一個帶有兩個元素的表單：一個textarea框和一個提交按鈕。如何在textarea onblur上保持提交按鈕可見和可執行

我想要div標籤（包含textarea和提交按鈕）消失，如果我點擊某處「其他」比提交按鈕。我開始了下面的代碼。所以在離開textarea的焦點時，我可以讓div標籤消失。

問題是，如果div消失，提交按鈕也意味着我無法提交表單！我怎樣才能解決這個問題？

有什麼建議嗎？謝謝！

** Facebook用它的評論來做這件事。如果你點擊「發表你的評論...」字段，textarea就會出現，然後它會在失去焦點時消失，除非你按下了提交按鈕。

$('textarea').blur(function() { 
    $('#comment_posting_holder').hide(); 
});

來源

2010-05-12 ninu

如果你想要一個像Facebook一樣的實現，你需要檢查是否有人在文本框中寫了一些東西。

你可以看到我的回答工作here

HTML

<div> 
    <textarea class="comment_empty">Write a comment</textarea><br /> 
    <input type="submit" id="submit" value="Submit" style="display: none" /> 
</div>

jQuery的

$(document).ready(function(){ 
    var submit = $("#submit"); 

    $("textarea").blur(function() { 
     if ($(this).val() == "") { 
      $(this).val("Write a comment") 
        .removeClass("comment_filled") 
        .addClass("comment_empty"); 
      submit.hide(); 
     } 
    }).focus(function() { 
     if ($(this).val() == "Write a comment") { 
      $(this).val("") 
        .removeClass("comment_empty") 
        .addClass("comment_filled"); 
      submit.show(); 
     } 
    }); 
});

一些CSS

.comment_empty { 
    color: gray; 
    height: 30px; 
} 

.comment_filled { 
    color: black; 
    height: 100px; 
}

來源

2010-05-12 04:46:45 GerManson

謝謝你超越！很好的回答，並再次感謝你，如此友善！ – ninu 2010-05-12 05:09:13

歡迎您！ :) – GerManson 2010-05-12 05:14:47

由於代碼中的語法錯誤而無法工作。除了缺少單引號之外，只要是在實際發射的事件中，你看起來不錯。試試這個：

$(document).ready(function(){ 
    $('textarea').blur(function() { 
     $('#comment_posting_holder').hide(); 
    }); 
});

來源

2010-05-12 03:50:40 Jage

好吧我輸入錯以上，但沒有，這不是問題。看到這裏的問題...提交按鈕消失也。我不希望它消失！然後我無法提交表單。看到我的觀點？由於div標籤本身擁有textarea和submit按鈕，一旦textarea失去焦點，一切都消失了！我只希望一切都消失，只有當我點擊其他任何地方，這是代碼的這一部分將做的是。但是，當我放下鼠標並點擊提交按鈕時，一切都會消失。 – ninu 2010-05-12 04:08:31

我明白你想要的：
如果用戶點擊任何地方，並且被點擊的元素不是提交按鈕，那麼隱藏div。

代碼做到這一點：

$(document).ready(function() { 
    $(document).click(function(event) { 
    if (event.target.id == "idOfSubmitButton") { 
     //user clicked the submit button (make sure to give it an ID) 
     //if you wanted to be really hardcore, you could submit the form here via AJAX 
    } 
    else { 
     //user clicked anywhere on the page but the submit button 
     //here you'd want to check and make sure someone has actually typed 
     //something in the textarea, otherwise this will happen for every 
     //click on a hyperlink, button, image, et cetera on the page 
     $('#comment_posting_holder').hide(); 
    } 
    }); 
});

來源

2010-05-12 04:49:01 GlenCrawford

如何在textarea onblur上保持提交按鈕可見和可執行

回答

相關問題