禁止提交空白输入和文本区域

Prevent submitting blank input and textarea

本文关键字：文本 区域 输入 提交 空白 禁止      更新时间：2023-09-26

我使用的是input、textarea和input button。当input和textarea为空时，我需要button为disabled。

这是Html

<input type="text" class="area">
<textarea name="testo" class="area" cols="30" rows="10"></textarea>
<input type="button" class="btn" value="send" disabled>

Javascript

$('.area').on('keyup' , function() {
    if( $('input').val().length > 0 && $('textarea').val().length > 0 ){
        $('.btn').prop('disabled', false);
    }
    else {
        $('.btn').prop('disabled', true);
    }
});

它工作正常，但是，如果按下spacebar并键入blank个字符，则length不再是< 0，因此button不再是disabled。我该如何防止这种情况发生？

使用$.trim()清除前导和尾随空格的值

if( $.trim($('input').val()).length > 0 && $.trim($('textarea').val()).length > 0 ) {
}

使用以下函数定义，确保您有可用的"trim"函数

if(typeof String.prototype.trim!=="function")
String.prototype.trim=function(){
    return this.replace(/^'s+|'s+$/g,"")
}

现在您的代码不应该更改用户输入。。。但它应该能够检测用户是否只键入"空格"

$('.area').on('keyup' , function() {
if( $('input').val().trim().length > 0 && $('textarea').val().trim().length > 0 ){
    $('.btn').prop('disabled', false);
} else {
    $('.btn').prop('disabled', true);
}

})；

<form>
<input type="text" id="text1" value="name"/>
<textarea type="text" id="text2"></textarea>
<input type="button" id="button1" value="click">click</button>
</form>
if( $('#text1').val().length > 0 && $('text2').val().length > 0 ){
       $('#button1').prop('disabled', false); 
    }
    else {
        $('#button1').prop('disabled', true);
    }

$('.area').on('keyup' , function() {
   if($.trim($('input').val()).length > 0 && $.trim($('textarea').val()).length > 0 ){
       $('.btn').prop('disabled', false);
   }
   else {
    $('.btn').prop('disabled', true);
   }
});

使用jquery的trim函数：

$('.area').on('keyup' , function() {
    if($.trim($('input').val()).length > 0 && $.trim(($('textarea').val()).length > 0 ){
        $('.btn').prop('disabled', false);
    }
    else {
        $('.btn').prop('disabled', true);
    }
});

[参见下面的链接。在这里我得到了这个问题的答案][1]

    $(document).ready(function(){ 
$("#txtNoSpaces").keydown(function(event) {
    if (event.keyCode == 32) {
        event.preventDefault();
    }
});
});

http://jsfiddle.net/jquerybyexample/MwEkj/

相关文章：