Наблюдение за вводом текстового поля

Question

У меня есть текстовое поле ввода и две кнопки, одна «Очистить», а другая «Сохранить», реализованная в xul в типичной раскладке, подобной этой:

<textbox id="inputTextbox" placeholder="Enter here a new entry" value = ""
             oninput="enableBtns(event);"/>

<button id="clearBtn" label="Clear" accesskey="C" disabled="true"
           oncommand="clearField();"/>

<button id="saveBtn" label="Save" accesskey="S" disabled="true"
           oncommand="saveEntry();"/>

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

Я могу легко выполнить эту функцию с помощью атрибута "oninput", используя этот код в моем js:

enableBtns: function(event) {
  document.getElementById("clearBtn").disabled = !document.getElementById("inputTextbox").value; 
  document.getElementById("saveBtn").disabled = !document.getElementById("inputTextbox").value; },

Теперь моя проблема заключается в том, как добиться той же функциональности для состояния кнопки,без использования атрибута «oninput», но с использованием наблюдателя.Итак, как мне зарегистрировать наблюдателя при загрузке диалогового окна, чтобы отслеживать текстовое поле для ввода и изменять состояние кнопок?(если текстовое поле не пустое)

Я прочитал много связанных статей по MDN , но во всех случаях они упоминают ситуации и примеры, в которых наблюдатель используется для отслеживания изменений в настройках расширения.Я хочу использовать наблюдателя динамически в качестве «датчика» для изменений в текстовом поле.Как я могу это сделать .. ??

Любая информация, ресурсы и примеры кода для работы над ним, будет очень признателен!

Спасибо

Answer 1

(В этом ответе предполагается, что вы разрабатываете расширение для Firefox, но ваш вопрос не совсем понятен).

Я думаю, что вы не видите лес за деревьями.Вы упоминаете, что хотите иметь «наблюдателя» для ввода текста, но использование события «oninput» означает своего рода наблюдатель (технически он называется прослушивателем событий ).Это рекомендуемый способ работы с элементами управления XUL, и он делает все, что, я думаю, вам нужно.Все, что вам нужно сделать, это разобраться с особыми случаями, которые представляют ваши кнопки:

clearField: function() {
  document.getElementById("inputTextbox").value = "";
  enableBtns(); // This magically takes care of our button status!
}

saveEntry: function() {
  var value = document.getElementById("inputTextbox").value;
  // 1. Do something with the value here (save it wherever you want)
  // 2. Now you need to decide; do I want to leave the value in the textbox?
  //    Or do I want to clear the textbox? Either way, let's do that next.

  // 2a. If we clear the text box, I might simply call clearField() so it can do
  //     all the work for me.

  // 2b. If we leave the text box alone, you'll need to disable the buttons
  //     manually at this point. Pretty easy.
}

Я полагаю, что вышеупомянутое решение будет работать практически при любой возможности.Единственная возможность, для которой это может не сработать (и вам придется проверить это; я не могу точно вспомнить, как запускается событие oninput), это если кто-то, кроме пользователя, изменяет текст в элементе управления (т. Е. Вы очищаетеданные из URL страницы).В этом случае вам придется выполнять все свои контрольные обновления, где бы вы ни копировали данные.Но опять же, ваш вопрос не проясняет, является ли это вашей конечной целью.

Один вопрос ответа, который я могу задать, - почему вы не хотите использовать событие oninput?

Answer 2

Если вы включаете jQuery на свою страницу, вы можете использовать обработчик изменений jQuery:

$('#inputTextbox').change(function(){
  var disableButtons = $(this).val() == '';
};

http://api.jquery.com/change/

Одна возможная проблема, с которой вы можете столкнуться, это то, что она будет срабатывать только тогда, когда пользователь снимает фокусировку с текстового поля. Если вы хотите немедленно реагировать на любые нажатия клавиш в текстовом поле, лучше всего подойдет обработчик клавиш jQuery:

$('#inputTextbox').keydown(function(){
  // your code here
};

http://api.jquery.com/keydown/

И для того, чтобы связать это во время загрузки окна, вы должны поместить его в обработчик, готовый для DOM в jQuery:

$(function(){
    // your code here
});

http://api.jquery.com/ready/