Javascript 观察输入文本框

我有一个输入文本框和两个按钮，一个是“清除”，另一个是“保存”，用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”属性，而是使用观察者。 那么，如何在对话框窗格加载时注册观察者，以监视文本框中的输入条目并更改按钮的状态？（如果文本框不是空的）

我读过很多关于扩展的相关文章，但在所有情况下，它们都提到使用观察者监视扩展偏好变化的情况和示例。我想动态地使用观察者作为文本框中更改的“传感器”。我该怎么做

任何信息，资源和样本代码的工作，将非常感谢

---

谢谢

如果您在页面中包含jQuery，那么您可以使用jQuery的更改处理程序：

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

一个可能存在的问题是，只有当用户将焦点从文本框中移开时，它才会触发。如果要立即对文本框中的任何击键做出反应，jQuery的keydown处理程序可能是更好的选择：

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

为了在窗口加载时绑定它，您需要将它包装在jQuery的DOM就绪处理程序中：

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

（这个答案假设您正在开发一个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事件？

谢谢您的回复，但不幸的是，这对我没有帮助。。虽然我知道jQuery，但我还没有“接触”它。目前，我感兴趣的是通过仅使用observer服务来实现我的目标。当然，如果可能的话。再次感谢你的帮助

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.
}