Javascript OnChange檢測文本區域

我有一個textarea，一個按鈕和一些下拉列表。用戶通過ddls並回答一些問題，並根據下拉列表在textarea中生成文本。Javascript OnChange檢測文本區域

在提問中的某個點，該按鈕變得可見，以便提交;我實際上並沒有提交onclick頁面，我正在做其他客戶端的東西。

問題的要點是：如果用戶試圖編輯textarea，我希望按鈕消失（display：none;）;直接或通過粘貼/上下文菜單。如果用戶編輯了textarea，但這個按鈕不再與應用程序相關，那就好了。如何檢測textarea是否正在更改。

編輯：我不能使用jQuery。

2010-09-20 bill

-2

如果你可以使用jQuery我會這樣做。

$('#MyElementname').change(function(){ alert('Changed!') })

或

$('#MyElementname').change(function(){ 
    if ($(this).val() == "") 
    //do something 
    else 
    //do something else 
})

或

$('#MyElementname').keypress(function(){ 
    if ($(this).val() == "") 
    //do something 
    else 
    //do something else 
})

重要：

裹所有上述內;

$(document).ready(function() { 
    //above code in here 
});

來源

2010-09-20 05:44:29 griegs

我可以在邏輯上跟隨是如何工作的，因此它可能會有所幫助，但不幸的是我不能使用jQuery。我將研究textarea的按鍵事件和onchange事件。我應該指定，但是，無論如何。 – bill 2010-09-20 06:37:20

已經有一個onchange事件觸發一次焦點移出文本區域的。這應該適用於您的目的，因爲用戶無法在沒有將焦點移出textarea的情況下單擊該按鈕。

如果您必須檢測到更快的變化，並且可以直接輸入和複製/粘貼，我能想到的唯一方法是使用計時器定期檢查文本是否已更改。

來源

2010-09-20 05:47:42 casablanca

這裏是一個小例子與onkeyup

<html> 
<head></head> 
<body> 
    <textarea id="txt"></textarea><span id="res"></span> 
    <script> 
     document.getElementById('txt').onkeyup = function(e){ 
      var res = 'unchanged'; 
      if(this.oldValue !== this.value){ 
       this.oldValue = this.value; 
       res = 'changed'; 
      } 
      document.getElementById('res').innerHTML = res;  
     }; 
    </script> 
</body> 
</html>

來源

2010-09-20 07:33:28 Mic

粘貼，拖放？ – 2010-09-20 08:43:27

該死！我在另一個問題上回答了這個問題。你是對的。 – Mic 2010-09-20 13:02:04

的change事件是完全可靠的，但只有當文本區域失去焦點，這意味着只要用戶嘗試點擊按鈕，它就會消失火災。因此，這具有期望的結果，但用戶體驗差。

另一種方法是監視textarea的變化，這是開始變得棘手的地方。如果您使用基於事件的方法來執行此操作，則需要檢測鍵盤輸入，粘貼和拖放操作。並非所有瀏覽器都支持粘貼檢測（特別是Firefox 2和所有版本的Opera都不支持），所以它已經變得棘手。更簡單，更多瀏覽器但更髒的方法是基於輪詢的方法，您可以將它與textarea的blur事件的處理程序結合使用，以防止用戶在輪詢之間單擊該按鈕的可能性。下面，只要它是隻輪詢textarea的具有焦點：

var textarea = document.getElementById("your_textarea"); 
textarea.onfocus = function() { 
    var initialValue = textarea.value; 

    function testForChange() { 
     if (textarea.value != initialValue) { 
      // Do the button hiding stuff 
     } 
    } 

    textarea.onblur = function() { 
     window.clearInterval(timer); 
     testForChange(); 
     textarea.onblur = null; 
    }; 

    var timer = window.setInterval(function() { 
     testForChange(); 
    }, 50); 
};

來源

2010-09-20 09:00:25

我隱藏按鈕後如何關閉投票？ – bill 2010-09-20 09:10:06

'window.clearInterval（timer）;'in'testForChange'，雖然也許你想讓按鈕重新出現，如果用戶撤消他們所做的更改？ – 2010-09-20 10:37:25

Javascript OnChange檢測文本區域

回答

相關問題