Динамически обнаруживать текстовое поле пустое или нет

Question

Я пытаюсь динамически обнаруживать, что текстовое поле пуст или нет. Я делаю это, поэтому я могу показать кнопку отправки только тогда, когда в текстовом поле есть текст.

Я пробовал этот код ниже, но он не работает.

var text = document.getElementById("text").value; 

if (text !== ''){ 
    alert("works"); 
    document.getElementById("sendicon1").style.display = "none";   
    document.getElementById("sendicon2").style.display = "inline";   
} 
else{ 
    alert("not working"); 
    document.getElementById("sendicon2").style.display = "none";   
    document.getElementById("sendicon1").style.display = "inline"; 
} 

Answer 1

Это очень легко с input события.

var textarea = document.getElementById("text"); 
textarea.addEventListener('input', hideOnEmpty); 
function hideOnEmpty() { 
    var text = this.value; 
    if (text !== ''){ 
     alert("works"); 
     document.getElementById("sendicon1").style.display = "none";   
     document.getElementById("sendicon2").style.display = "inline";   
    } 
    else{ 
     alert("not working"); 
     document.getElementById("sendicon2").style.display = "none";   
     document.getElementById("sendicon1").style.display = "inline"; 
    } 
} 

См ввода документации событий для получения дополнительной информации (MDN, W3schools). Этот код активирует функцию hideOnEmpty при каждом изменении содержимого текстового поля.

Остерегайтесь - этот код не будет работать в IE8 или ниже и может не обнаруживать удаления в IE9 (но нет надежного способа проверить, изменился ли вход без опроса в IE9).

Answer 2

Вы не указали jQuery как зависимость, но это определенно область, где это пригодится.

$('#text').on('input propertychange', function() { 
    if ($(this).val() !== "") { 
     $("#sendicon1").hide(); 
     $("#sendicon2").show(); 
    } 
    else { 
     $("#sendicon2").hide(); 
     $("#sendicon1").show();  
    } 
}); 

input событие будет обнаруживать все изменения в textarea- нажатиями клавиш, копирования и вставки, и многое другое.

Answer 3

Вы помещаете этот код внутри функции onkeyup или onchange? Вы могли бы сделать что-то вроде:

window.onload = function() { 
    var text = document.getElementById("text"); 
    var func = function() { 
    if (text.value !== '') { 
     alert("works"); 
     document.getElementById("sendicon1").style.display = "none";   
     document.getElementById("sendicon2").style.display = "inline";   
    } else { 
     alert("not working"); 
     document.getElementById("sendicon2").style.display = "none";   
     document.getElementById("sendicon1").style.display = "inline";  
    } 
    } 
    text.onkeyup = func; 
    text.onchange = func; 
} 

Вам не нужно как OnKeyUp и OnChange, это зависит от того, когда вы ищете его уволить. onchange будет после того, как вы уделите внимание (размытие), и onkeyup будет после нажатия каждой клавиши внутри текстового поля.