Как активировать кнопку при появление текста в поле?

Question

[Vadim997]

Необходимо активировать кнопку при появлении определённого текста в поле.

Вот код:

<button id="button">OK</button>
	<input type="text" id="text">

<script>
		
	var elem = document.getElementById("button");
	var text = document.getElementById("text").value;
		elem.disabled = true;
	
	function activateButton() {

		if(text == "hello") {
			elem.disabled = false;
		}
	}

	activateButton();
</script>

Answer 1

[Евгений Петров]

Достаточно давно появилось событие input https://developer.mozilla.org/en-US/docs/Web/Event...
В отличие от других событий даёт именно то, что вам нужно:
— ввод с клавиш
— перетаскивание
— копирование/вставку
— правильно отслеживает ввод с бухгалтерской раскладки (типа Alt+171) единственного символа

Для старых IE приходилось параллельно отслеживать propertychange, но там всё хуже — IE берёт в расчёт любое изменение, даже стилей, даже состояния типа focus/blur.

Вот вам искомое jsfiddle.net/petroveg/m2H67/1

Answer 2

[cha-cha]

var elem = document.getElementById("button");
var input = document.getElementById("text");
elem.disabled = true;

input.addEventListener("change", function(){
    if(this.value == "hello"){
        elem.disabled = false;
    }
});

Comments

[Vadim997]

Спасибо, а другим способом нельзя?

[cha-cha]

А чем вам этот не угодил?
Вот с jQuery:

$("#button").prop("disabled", true);
$("#text").on("change", function(){
    if($(this).val() == "hello"){
        $("#button").prop("disabled", false);
    }
});

[cha-cha]

Можно вместо change ловить keyup, тогда кнопка будет активироваться сразу, без надобности убирать фокус с инпута.