Javascript == «» не работает правильно

Question

У меня есть этот код:

$(document).ready(function() { 
 
    $('#search').keyup(function() { 
 
    var search = $('#search').val(); 
 
    console.log(search); 
 
    if (search.length !== 0 || search !== "") { 
 
     $('.wrapper').css({ 
 
     "background-color": "#000", 
 
     "opacity": 0.8 
 
     }); 
 
     $('.post').remove(); 
 
    } else { 
 
     location.reload(false); 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#"> 
 
    <button type="submit">Search</button> 
 
    <input type="text" name="search" id="search" /> 
 
</form>

, но проблема в том, что все, что положить пространство в начале во входном элементе, функция не (он продолжает работать $('.wrapper').css({"background-color":"#000","opacity":0.8}); and $('.post').remove();).

Answer 1

Используйте String#trim, чтобы удалить пробелы перед и после текста:

var search = $('#search').val().trim(); 

$(document).ready(function() { 
 
    $('#search').keyup(function() { 
 
    var search = $('#search').val().trim(); 
 

 
    if (search) { 
 
     $('.wrapper').css({ 
 
     "background-color": "#000", 
 
     "opacity": 0.8 
 
     }); 
 
     $('.post').remove(); 
 
    } else { 
 
     location.reload(false); 
 
    }; 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#"> 
 
    <button type="submit">Search</button> 
 
    <input type="text" name="search" id="search" /> 
 
</form>

Answer 2

Просто использовать! или !! для проверки пустых строк:

!"" // true 
!!"" // false 

Answer 3

Просто добавьте search = search.trim(); до вашего условна.

При добавлении пространства к входу search является ' ' не '' так trim необходимо.

Кроме того, с помощью:

if (search) { 
    .... 
} 

вместо

if (search.length !== 0 || search !== '') { 
    ... 
} 

Есть более простой проверки, которая даст вам тот же результат в этом случае. Оба '' и 0: 'falsey'.

$(document).ready(function() { 
 
    $('#search').keyup(function() { 
 
    var search = $('#search').val(); 
 
    search = search.trim(); //Try adding this line 
 
    console.log(search); 
 
    if (search.length !== 0 || search !== "") { 
 
     $('.wrapper').css({ 
 
     "background-color": "#000", 
 
     "opacity": 0.8 
 
     }); 
 
     $('.post').remove(); 
 
    } else { 
 
     location.reload(false); 
 
    }; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#"> 
 
    <button type="submit">Search</button> 
 
    <input type="text" name="search" id="search" /> 
 
</form>