观察输入文本框

我有一个输入文本框和两个按钮，一个“清除”和其他的“保存”，在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; },

我现在的问题是如何实现的按钮状态相同的功能，无需使用“ininput”属性，但使用观察者。所以，我怎么注册一个观察者时的对话框窗格中的负载，以监测输入条目的文本框，改变按钮的状态？（如果文本框不为空）

我已阅读MDN许多相关文章，但在所有情况下，他们都提到了观察者用于监视扩展的偏好变化的情况和示例。我想动态地将观察者用作文本框中变化的“传感器”。我该怎么做..？？

任何信息，资源和示例代码进行这项工作，将不胜感激！

谢谢

来源

2011-12-07 cicada

如果你包括你的页面上的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就绪处理程序：

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

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

来源

2011-12-07 22:56:03 Amit

感谢您的回复，但不幸的是这对我没有帮助..虽然我知道关于jQuery的，但我还没有“触及”它。目前，我很有兴趣通过来实现我的目标，仅使用观察者服务。如果有可能的话。再次感谢您的帮助 – cicada

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

来源

2012-01-05 15:09:27

观察输入文本框

回答

相关问题