JQuery的顯示/隱藏按鈕家屬

Question

function countChar(val) { 
 
    var len = val.value.length; 
 
    if (len == 0 || len == null) { 
 
     $('#sending').hide(); 
 
    } else if (len >= 500) { 
 
     val.value = val.value.substring(0, 500); 
 
    } else { 
 
     $('#char_no').text(len + "/500"); 
 
    } 
 
    };

<textarea id="txt" rows="10" cols="40" onkeyup="countChar(this)"></textarea> 
 
<div id="char_no">0/500</div> 
 
<input id="sending" type="submit" value="POST">

以上是我的JavaScript和HTML，它可以計算出有多少個字符包含在textarea的，但我想隱藏，如果提交按鈕用戶沒有輸入任何東西，或者用戶輸入了某些內容，但刪除了所有內容。有任何想法嗎？

Answer 1

您可以使用toggle來顯示或隱藏按鈕。還建議在JavaScript中添加事件，而不是標記。

function countChar() { 
    if (this.value.length > 500) { 
     this.value = this.value.substring(0, 500); 
    } 
    var len = this.value.length; 
    $('#sending').toggle(!!len); // !! casts a boolean 
    $('#char_no').text(len + "/500"); 
}; 

$('#txt').on('input', countChar); 

請注意，this裏面的函數指的是元素。

DEMO：http://jsfiddle.net/19sLaw7w/1/

Answer 2

<!-- HTML --> 
<textarea id = "myinput"></textarea> 
<button style = "display: none" id = "mybutton">Submit</button> 

活動整潔：

// Pure JS 
var myinput = document.getElementById('myinput'); 
var mybutton = document.getElementById('mybutton'); 

myinput.onchange = function() 
{ 
    var charcount = myinput.value.length; 

    if(charcount == 0) 
    { 
     mybutton.style.display = 'none'; 
    }else{ 
     mybutton.style.display = 'inherit'; 
    } 
} 

// jQuery 
$('#myinput').on('change', function(){ 
    var charcount = $(this).val().length; 

    if(charcount == 0) 
    { 
     $('#mybutton').hide(); 
    }else{ 
     $('#mybutton').show(); 
    } 
});