迴應中達特

textarea的變化我在我的HTML文件中得到這個：迴應中達特

<textarea id="inputbox" placeholder="type here"></textarea>

什麼是線了一個處理程序，將火的textarea的變化立即只要內容正確的方法是什麼？（無論是通過鍵盤，鼠標/剪貼板，語音輸入，腦波讀取器等）

我想：

query("#inputbox").on.change.add(handler)

但（至少在Dartium）時只觸發您標籤出了場。

目的是更新「實時預覽」窗口，類似於Stackoverflow在鍵入時呈現Markdown輸出的方式。

來源

2013-01-21 rkagerer

這是迄今爲止最好的。如果有人知道更緊湊或更好的選擇，我很樂意聽到。

編輯：代碼片段更新爲new pattern用於事件註冊。

import 'dart:html'; 

void main() { 
    query("#inputbox") 
    ..onChange.listen(handler) 
    ..onKeyDown.listen(handler) 
    ..onKeyUp.listen(handler) 
    ..onCut.listen(handler) 
    ..onPaste.listen(handler); 
} 

void handler(Event event) { 
    print((query("#inputbox") as TextAreaElement).value); 
}

確切行爲將瀏覽器和操作系統之間變化。

你可以跳過keyDown，但要注意的keyDown和使用keyUp行爲是由OS和isn't guaranteed to be symmetric影響。您可能會想到一個變化，至少在下一個keyUp或變化事件被激發。事實上，我通過在Windows 7上創建一個小應用程序向Dartium和IE9發送孤兒WM_KEYDOWN消息來證明這一點。

keyPress可以用來代替的使用keyUp和的keyDown，但won't generate events像退格鍵和刪除某些鍵。

cut和paste立即對用鼠標執行的剪切或粘貼作出反應。如果您不使用它們，則change事件將捕獲該更改，但直到該領域失去焦點或sometimes even later。

input事件可能會取代上面的所有聽衆，並且似乎在Dartium中工作得很好，但在IE9下它只捕獲字符添加，而不是刪除。

注意keyUp和keyDown可能會爲光標鍵，歸位，結束，移位等（例如在IE9中）生成額外的不需要的事件。當用戶使用快捷鍵執行這些操作時，除了剪切/粘貼偵聽器外，它還會觸發。

雖然這個問題是針對Dart的，但上面的很多討論適用於任何監聽DOM的代碼。即使keyCode跨瀏覽器的值aren't standardized（more detail）。

檢查KeyboardEventController類也是值得的，儘管大體上當我測試它時，邊緣案例的行爲與上面提到的類似。這可能是也可能不是設計。Dart開發人員通過跨瀏覽器不一致的方式爲insulate you做出了一些努力，但它仍在進行中。

此外，當我們在談論textarea，請記住使用它的value財產，not its text property。最後，請確保您的handler對鍵盤活動的「爆發」作出了反應（例如，某種計時器簡要地延遲了處理程序的內容並彙總了同時發生的任何其他事件）。

相關的問題和環節：

來源

2013-01-21 06:08:18 rkagerer

它不清楚你是否使用聚合物，但如果你是的話，你可以通過在聚合物元素中創建一個函數來改變@observable註解的變量，如[變量名稱] Changed（oldvalue ）。我最初在這裏發現這裏：How to subscribe to change of an observable field

來源

2013-12-09 02:32:13 davesdig

回答

相關問題