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/

观察输入文本框

2 个答案: