javascript - 防止提交空白输入和文本区域

Question

我正在使用inputatextarea和 a input button。我需要当andbutton为空时。disabledinputtextarea

这是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);
    }
});

它工作正常，但是，如果按 thespacebar并输入blankchars ，则lengths< 0不再存在，因此button不再存在disabled。我怎样才能防止这种情况？

Answer 1

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

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

}

Answer 2

使用以下函数定义，以确保您确实有可用的“修剪”函数

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

});

Answer 3

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

Answer 4

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

Answer 5

使用trimjquery的功能：

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

Answer 6

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

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

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