我想创建一个简单的聊天,但不知道如何在单击按钮时清除我的输入,同时在输入为空时使按钮不可单击。我就是这样做的,但它不起作用。
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>
最佳答案
你所做的一切都很好,你只需要在点击事件中添加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>
关于javascript - 如果单击按钮,如何清除我的输入,同时如果输入为空,如何使按钮不可单击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53298633/