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