观察输入文本框

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 的 keydown 处理程序可能是更好的选择：

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

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

为了在窗口加载时绑定它，你可以将它包装在 jQuery 的 DOM-ready 处理程序中：

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

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