2012-08-26 29 views
5

के साथ दर्ज वर्ण का पता लगाएं मैं उपयोगकर्ता को '@' टाइप करते समय एक क्रिया (स्वतः पूर्ण करने में सक्षम) शुरू करना चाहता हूं। हालांकि मुझे नहीं पता कि इसे सही तरीके से कैसे किया जाए। मेरे पास jQuery उपलब्ध है।जावास्क्रिप्ट

एक QWERTY कीबोर्ड पर आमतौर पर, यह इस तरह है:

$('textarea').live('keydown', function(e) { 
    if (e.which === 50) { 
    console.log('@ has been entered.'); 
    } 
}); 

हालांकि यह एक AZERTY कीबोर्ड पर सही ढंग से काम नहीं करता है। KeyCode = 50 é~/2 कुंजी से मेल खाता है। AZERTY कीबोर्ड में '@' टाइप करने के लिए, यह AltGr + à@/0 कुंजी है।

संपादित करें: मैं स्पष्ट नहीं था। स्वत: पूर्ण तब होता है जब @ दर्ज किया जाता है, और उसके बाद ही। उदाहरण, जब कोई "हैलो @" में प्रवेश करता है तो यह शुरू होता है, हालांकि जब वह "हैलो @ कुछ और नहीं" टाइप करता है तो पूरा कुछ भी नहीं करेगा। उदाहरण: http://mrkipling.github.com/jQuery-at-username/ (यह केवल QWERTY कीबोर्ड पर काम करता है)।

+0

डी 'ओह, मैं क्या StackOverlow वास्तव में क्या मैं टिप्पणी में उपयोगकर्ता नाम ऑटोकंप्लीट विशेषता द्वारा की जरूरत है नोटिस नहीं किया था। – jcisio

उत्तर

3

उपयोग keypress बजाय keydown। जबकि keydown एक कुंजी के प्रत्येक प्रेस से संबंधित है, keypress अनुवादित वर्णों से संबंधित है, इसलिए उदाहरण के लिए aa पर भिन्न हो सकता है जबकि शिफ्ट कुंजी दबाई जाती है, वर्णित वर्ण काम करते हैं, मृत कुंजी काम करते हैं, और कीबोर्ड मैपिंग में अन्य अंतर हैंडल किए जाते हैं ।

+0

बिल्कुल! 'कीप्रेस' घटना सही ढंग से '@' (64) के कोड का पता लगाती है। मुझे लगता है कि मुझे दो घटनाओं को अलग करना होगा: एक "पूर्ण" भाग के लिए तीर कुंजियों का पता लगाने के लिए '@' वर्ण का पता लगाने के लिए, दूसरा 'keydown' का उपयोग करके। – jcisio

+0

मैंने अपने आप को स्वत: पूर्णता में संयोजित किया है। –

+0

@jcisio यह समझ में आता है। हालांकि, मैं 'keypress' के एकीकृत ब्राउज़र समर्थन के बारे में निश्चित नहीं हूं। – VisioN

0

दिमाग में आने वाला एकमात्र अन्य विकल्प एक टाइमर होगा जो पाठ इनपुट की सामग्री की जांच करता है।

var patt=new RegExp(/^@/); 
var charCheck = setInterval(function(){ 
    if (patt.test($("#textInput").val())){ 
    // initiate autocomplete 
    } 
},100); 

इस कोड #textInput तत्व की सामग्री का निरीक्षण किया और अगर यह स्ट्रिंग की शुरुआत में एक @ प्रतीक की नियमित अभिव्यक्ति से मेल खाता है देखेंगे। यदि ऐसा होता है, तो test() फ़ंक्शन सत्य का मूल्यांकन करेगा और आप अपना स्वत: पूर्ण कोड शुरू कर सकते हैं।

+0

इसे टेक्स्टरेरा में कहीं भी @ की जांच करनी चाहिए, और स्वत: पूर्ण केवल तब शुरू होता है जब कर्सर '@' चरित्र के ठीक बाद होता है। मुझे लगता है कि इन सभी स्थितियों को सत्यापित करना अभी भी संभव है, हालांकि क्या कोई आसान समाधान है? – jcisio

+0

@jci - आपको अपने मुख्य पोस्ट में कर्सर की स्थिति के बारे में विनिर्देश का उल्लेख करना चाहिए। यदि आप स्ट्रिंग में कहीं भी उस प्रतीक को खोजना चाहते हैं तो बस '^ 'प्रतीक को हटा दें। – Lix

2

@ को फ़ील्ड मान में अंतिम वर्ण के रूप में दर्ज किया गया था, तो यह जांचने के बारे में कैसे?

$("body").on("keyup", "textarea", function(e) { 
    if (this.value.indexOf("@") == this.value.length - 1) { 
     console.log("Starting autocomplete"); 
    } 
});​ 

डेमो:http://jsfiddle.net/FKhPW/2/

+0

धन्यवाद, यह मूल रूप से करता है जो मैं करना चाहता हूं। कुछ मामले हैं, उदाहरण के लिए, जब उपयोगकर्ता एक संदेश समाप्त करता है, तो शुरुआत में चलता है और '@ उपयोगकर्ता नाम' जोड़ता है यह काम नहीं करेगा। मैं इसे अनुकूलित करने की कोशिश करूंगा। – jcisio

+0

काम नहीं कर रहा है। पिछली कुंजी और शिफ्ट कुंजी के लिए भी इसकी फायरिंग – Ashirvad

+0

@jcisio हां, संभवतः इसे कुछ सुधार की आवश्यकता हो सकती है। कम से कम मुझे कोई अन्य तेज़ और कामकाजी समाधान नहीं दिख रहा है। – VisioN

0

यहाँ आप जाना काम कर डेमो: यहांhttp://jsfiddle.net/LxpQQ/

मेरे पुराने जबाब से:

jquery autocomplete using '@'

आशा है कि इसके कारण आपको फिट होगा :)

कोड

source: function(request, response) { 
      if (request.term.indexOf("@") >= 0) { 
       $("#loading").show(); 
       getTags(extractLast(request.term), function(data) { 
        response($.map(data.tags, function(el) { 
         return { 
          value: el.name, 
          count: el.count 
         } 
        })); 
        $("#loading").hide();      
       }); 
      } 
     }, 
+0

धन्यवाद, जबकि मैं jQuery UI (और इसकी स्वत: पूर्ण लाइब्रेरी) से परहेज कर रहा हूं, इस उदाहरण में कुछ बुद्धिमान बिंदु हैं, जैसे कि यह केवल अंतिम शब्द आदि प्राप्त होता है। मैं बाद में उपयोग के लिए बुकमार्क कर रहा हूं। – jcisio

+0

@jcisio Cooleos ':)' –

0

event.key और आधुनिक जेएस का उपयोग करें, @ सीधे जांचें!

कोई संख्या कोड अब और नहीं। आप सीधे कुंजी की जांच कर सकते हैं।

const input = document.getElementById("textarea"); 
input.addEventListener("keydown", function (event) { 
    if (event.key === "@") { 
     // Do something 
    } 
}); 

Mozilla Docs

Supported Browsers

संबंधित मुद्दे