javascript - 如果单击按钮，如何清除我的输入，同时如果输入为空，如何使按钮不可点击？

Question

我想创建一个简单的聊天，但不知道如何在单击按钮时清除我的输入，同时如果输入为空则使按钮不可单击。我就是这样做的，但它不起作用。

function ctrlButton() {
  btn.disabled = this.value.trim().length === 0;
}

text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);

$('#btn').on('click', function(e) {
  e.preventDefault();

  var val = $('#text').val();
  if (val.length >= 1) {
    $('#text').val("");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
  <input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
  <button class="button button1" id="btn">Send</button>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

您所做的一切都很好，您只需要 btn.disabled =true;在点击事件中添加。

function ctrlButton() {
  btn.disabled = this.value.trim().length === 0;
}

text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);

$('#btn').on('click', function(e) {
  e.preventDefault();

  var val = $('#text').val();
  if (val.length >= 1) {
    $('#text').val("");
     btn.disabled =true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
  <input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
  <button class="button button1" id="btn">Send</button>
</div>

更好的版本

$("#text").on("input propertychange paste",function(){
debugger;
  if($(this).val()===''){
    $('#btn').attr('disabled',true);
  }else{
    $('#btn').removeAttr('disabled');
  }
});
$('#btn').on('click', function(e) {
  e.preventDefault();

  var val = $('#text').val();
  if (val.length >= 1) {
    $('#text').val("");
     $('#btn').attr('disabled',true);
  }
});
$('#btn').attr('disabled',true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
  <input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
  <button class="button button1" id="btn">Send</button>
</div>