Запобігання поданню пустого вводу та текстової області

Я працюю з input textarea та кнопкою . Мені потрібно, щоб кнопка була вимкнена , коли input та textarea порожні .

This is Html

<input type="text" class="area">


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

It works fine, but , if a press the spacebar and so it types blank chars , the lengths are not < 0 anymore and so the button not anymore disabled. How can I prevent this situation?

3
Дякую за підказку, але я зробив швидкий jfiddle, справжній код в іншому, пов'язаний з класами та ідентифікаторами. В будь-якому випадку, дякую
додано Автор steo, джерело
роз'ясніть внизу, будь ласка.
додано Автор steo, джерело
Крім того, використання введення [тип = "текст"] замість того, щоб просто вхід для першого селектора. Просто щоб бути точним (в іншому випадку він буде також вибрати кнопку, яка не викликає яких-небудь проблем в цій конкретній ситуації, так як Val() буде брати до уваги тільки перший елемент колекції - але одна зміна до розмітки достатньо, щоб порушити ваш код).
додано Автор kapa, джерело

13 Відповіді

Використовуйте $. Trim() , щоб очистити значення від провідних і кінцевих пробілів

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

}
7
додано
чудово, спасибі!
додано Автор steo, джерело

Використовуйте наступні визначення функцій, які гарантують, що у вас є функція "оздоблення"

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

});

1
додано

Використовуйте наступні визначення функцій, які гарантують, що у вас є функція "оздоблення"

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

});

1
додано

Використовуйте наступні визначення функцій, які гарантують, що у вас є функція "оздоблення"

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

});

1
додано

скористайтеся функцією trim jquery:

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

скористайтеся функцією trim jquery:

$('.area').on('keyup' , function() {
    if($.trim($('input').val()).length > 0 && $.trim(($('textarea').val()).length > 0 ){
        $('.btn').prop('disabled', false);
    }
    else {
        $('.btn').prop('disabled', true);
    }
});
0
додано
$('.area').on('keyup' , function() {
   if($.trim($('input').val()).length > 0 && $.trim($('textarea').val()).length > 0 ){
       $('.btn').prop('disabled', false);
   }
   else {
    $('.btn').prop('disabled', true);
   }
});
0
додано
<form>
<input type="text" id="text1" value="name"/>


<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);
    }
0
додано
<form>
<input type="text" id="text1" value="name"/>


<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);
    }
0
додано
<form>
<input type="text" id="text1" value="name"/>


<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);
    }
0
додано

[Див нижче посилання. Ось я отримав відповідь на це питання] [1]

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

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

0
додано

[Див нижче посилання. Ось я отримав відповідь на це питання] [1]

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

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

0
додано

[Див нижче посилання. Ось я отримав відповідь на це питання] [1]

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

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

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram