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>

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>

Answer 2

您的逻辑非常正确。您需要做的最后一件事是在清除输入值时禁用该按钮。

请注意，我将下面的示例转换为完全使用jQuery来避免混淆。

var $btn = $('#btn').on('click', function(e) {
  e.preventDefault();
  var val = $('#text').val();
  if (val.length >= 1) {
    $('#text').val("");
    $btn.prop('disabled', true);
  }
});

$('#text').on('input', function() {
  var $text = $(this);
  $btn.prop('disabled', function() {
    return $text.val().trim().length === 0;
  });
}).trigger('input');

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

Answer 3

首先将您的按钮设置为禁用，例如：

<button class="button button1" id="btn" disabled>Send</button>

然后在<input>为空时禁用按钮，将这些功能放在文档底部的<script>标记中：

$('#text').keyup(function(){
   if ($('#text').val() != '') {
      $('#btn').prop('disabled', false);
   }  
});

$('#btn').click(function(){
   $('#text').val('');
   $('#btn').prop('disabled', true);
});

这应该对您有用。

Answer 4

您的代码是正确的，您只需要在按钮的onclick事件的最后添加$(this).attr("disabled",true);行即可。

这里是JSFiddle Link

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

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

Answer 5

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').prop('disabled', true);
  }
  else
  {
     $('#btn').prop('disabled', false);
  }
});

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

Answer 6

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>

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

6 个答案: