2013-01-21 20 views
5

में पाठ क्षेत्र परिवर्तनों का जवाब तुरंत मैं अपने html फ़ाइल में इस मिल गया है:डार्ट

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

हैंडलर कि पाठ क्षेत्र में परिवर्तन के तुरंत जब भी सामग्री को सक्रिय कर देगा ऊपर तार करने के लिए सही तरीका क्या है?

(कीबोर्ड, माउस/क्लिपबोर्ड, वाक् इनपुट, brainwave पाठक, आदि द्वारा किया या नहीं) मैंने कोशिश की:

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

लेकिन (कम से कम Dartium पर) यह केवल आग आप क्षेत्र से बाहर टैब के बाद।

उद्देश्य "लाइव पूर्वावलोकन" विंडो को अपडेट करना है, जिस तरह से टाइप करते समय स्टैक ओवरफ्लो मार्कडाउन आउटपुट प्रस्तुत करता है।

उत्तर

8

यह अब तक का सबसे अच्छा है। मुझे यह सुनकर खुशी होगी कि क्या कोई अधिक कॉम्पैक्ट या बेहतर विकल्प के बारे में जानता है।

संपादित करें: कोड स्निपेट इवेंट पंजीकरण के लिए 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 व्यवहार ओएस और isn't guaranteed to be symmetric से प्रभावित है हो सकता है। आप संभवतः अगले कुंजीअप या परिवर्तन ईवेंट को निकाल दिए जाने तक, संभवतः एक परिवर्तन को याद कर सकते हैं। दरअसल मैंने डार्टियम और आईई 9 को अनाथ WM_KEYDOWN संदेश भेजने के लिए विंडोज 7 पर थोड़ा ऐप बनाकर इसे साबित कर दिया।

keyPress बैकस्पेस और हटाने के जैसे कुछ चाबी के लिए KeyUp और के बजाय इस्तेमाल किया जा सकता keydown, लेकिन won't generate events

cut और paste माउस के साथ किए गए कट या पेस्ट पर तत्काल प्रतिक्रिया दें। यदि आप उनका उपयोग नहीं करते हैं, तो change ईवेंट परिवर्तन को कैप्चर करेगा, लेकिन जब तक फ़ील्ड फोकस न हो जाए, या sometimes even later

input घटना उपरोक्त सभी श्रोताओं को प्रतिस्थापित कर सकती है और डार्टियम में बहुत अच्छा काम कर रही है, लेकिन आईई 9 के तहत यह केवल चरित्र जोड़ों को कैप्चर करता है, निष्कासन नहीं।

नोट keyUp और keyDown कर्सर कुंजी, घर, अंत, शिफ्ट इत्यादि के लिए अतिरिक्त अवांछित घटनाएं उत्पन्न कर सकता है (उदा। आईई 9 में)। जब उपयोगकर्ता उस क्रियाओं के लिए शॉर्टकट कुंजी का उपयोग करता है तो यह कट/पेस्ट श्रोताओं के अलावा आग लग जाएगा।

हालांकि सवाल डार्ट के लिए विशिष्ट है, ऊपर दी गई बहुत सी चर्चा डीओएम को सुनकर किसी भी कोड पर लागू होती है। यहां तक ​​कि कुंजीकोड मूल्य aren't standardized ब्राउज़र में (more detail)।

यह KeyboardEventController वर्ग की जांच करने योग्य भी हो सकता है, हालांकि जब मैंने इसका परीक्षण किया तो किनारे का मामला व्यवहार ऊपर उल्लिखित जैसा था। यह डिजाइन द्वारा हो सकता है या नहीं भी हो सकता है।डार्ट डेवलपर क्रॉस-ब्राउज़र असंगतताओं से insulate you पर कुछ प्रयास करते हैं, लेकिन यह अभी भी एक काम प्रगति पर है।

इसके अलावा हम के बारे में पाठ क्षेत्र बात कर रहे हैं, अपने value संपत्ति, not its text property उपयोग करने के लिए याद है। अंत में, सुनिश्चित करें कि आपका handler कुंजीपटल गतिविधि के "विस्फोट" के प्रति अपनी प्रतिक्रियाओं को थ्रॉटल करता है (उदाहरण के लिए कुछ प्रकार का टाइमर जो आपके हैंडलर की गड़बड़ी को संक्षेप में रोकता है और उस दौरान होने वाली किसी भी अतिरिक्त घटनाओं को रोल करता है)।

संबंधित प्रश्नों और लिंक:

2

यदि आप पॉलिमर का उपयोग कर रहे हैं या नहीं, तो यह स्पष्ट नहीं है, लेकिन यदि आप हैं, तो आप फॉर्म में बहुलक तत्व में एक फ़ंक्शन बनाकर @observable के साथ एनोटेटेड एक चर में परिवर्तन की सदस्यता ले सकते हैं [चर नाम] बदल गया (पुराना)। मुझे मूल रूप से यह यहां मिला: How to subscribe to change of an observable field