javascript - 空白の入力とテキストエリアの送信を防ぐ

Question

私はinputatextareaと a で作業していinput buttonます。とが空buttonである必要がありdisabledます。inputtextarea

これは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);
    }
});

それは正常に動作しますが、 を押してchars と入力すると、spacebarsはもうありません。どうすればこの状況を防ぐことができますか?blanklength< 0buttondisabled

Answer 1

$.trim()先頭および末尾のスペースから値をクリーンアップするために使用します

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

}

Answer 2

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

$('.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 4

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