觀察輸入文本框

我有一個輸入文本框和兩個按鈕，一個「清除」和其他的「保存」，在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

觀察輸入文本框

回答

相關問題