Question

＆＃13;

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

＆＃13;

<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">

＆＃13;

上面是我的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();
    }
});

JQuery显示/隐藏按钮依赖于textarea字符的数量

2 个答案: