jQuery वैल() क्रोम में कैरेट तर्क के साथ काम नहीं कर रहा है

Question

मैं एक इनपुट फ़ील्ड के साथ काम कर रहा हूं जिसके लिए मैंने कुंजीकोड मैप किए हैं ताकि एक कीबोर्ड इनपुट इनपुट फ़ील्ड में एक अलग भाषा वर्ण प्रस्तुत करेगा।

समस्या बन जाता है जब वर्ण जो jQuery वैल() विधि ब्राउज़र इसलिए रखने से एक महत्वपूर्ण इनपुट के रूप में व्याख्या नहीं की जाएगी उपयोग कर रहे हैं "मैप किया" वर्ण के लिए कोई अतिरिक्त इनपुट इनपुट 'दृश्य' के अंत तक पहुँचते अंतिम इनपुट चरित्र हमेशा दिखाई देता है।

तो मैं कैरट तर्क (jsfiddle में नीचे इनपुट कैरट तर्क का उपयोग करता) जोड़ने के लिए है, लेकिन इस क्रोम/पर काम नहीं करता (वेबकिट?)

यहाँ मेरी उदाहरण के jsfiddle है। http://jsfiddle.net/dwickwire/S9EKN/

संपादित करें: मैं निम्नलिखित संस्करणों के साथ परीक्षण किया है, मेरे लिए लेकिन क्रोम में नहीं एफएफ में काम करता है

मैक बर्फ Leapord OSX 10.6.7

क्रोम: वी 11.0.696.68, वी 11.0.696.71 - काम नहीं करते

फ़ायरफ़ॉक्स: 4.0.1 - काम करता है

विंडोज क्रोम: अनिश्चित -v - काम नहीं करता है

मैं के अनिश्चित हूँ मैं इसे कैसे हल कर सकता हूं, कोई विचार? धन्यवाद

Answer 1

यदि आप इनपुट की स्थिति को scrollLeft स्थिति में सहेजते और जोड़ते हैं, तो यह अपडेट और टाइप किए गए चरित्र को ध्यान में रखेगा। हालांकि, अगर आप इनपुट के बीच में टाइपिंग शुरू करते हैं और टाइप करना प्रारंभ करते हैं तो यह विफल हो जाता है।

मैंने नीचे दिए गए कोड के साथ दूसरे इनपुट demo को अद्यतन किया। यह भी ध्यान रखें कि जो इनपुट और परीक्षण अवधि जोड़ा गया है, वही फ़ॉन्ट आकार होना चाहिए।

input_2.bind('keydown.keyboard', function(e) { 
    var key = "", 
     current_val = input_2.val(), 
     pos = input_2.caret(), 
     start_pos = pos.start, 
     end_pos = pos.end, 
     scroll = $(this).scrollLeft(); 

    // some mapped keys 
    switch (e.which) { 
     // e key 
    case 69: 
     key = "ε"; 
     e.preventDefault(); 
     break; 
     // f key    
    case 70: 
     key = "φ"; 
     e.preventDefault(); 
     break; 
     // z key     
    case 90: 
     key = "ζ"; 
     e.preventDefault(); 
     break; 
     // a key 
    case 65: 
     key = "α"; 
     e.preventDefault(); 
     break; 
    } 

    if (key !== '') { 
     var test = $('<span class="test">&nbsp;' + key + '</span>').appendTo('body'); 
     scroll += test.width(); 
     test.remove(); 
    } 

    input_2.val(current_val + key); 
    //Insert/Replace text at caret then restore caret   
    input_2.value = current_val.substr(0, start_pos) + key + current_val.substr(end_pos, current_val.length); 
    input_2.caret(start_pos + key.length, start_pos + key.length); 
    if (key !== '') { 
     $(this).scrollLeft(scroll); 
    } 

}); 

---

अद्यतन: scrollLeft स्थिति इसलिए यदि आप चरित्र के साथ अवधि के अंदर एक   जोड़ने थोड़ा, बंद लग रहा था, यह पता ज्यादा बेहतर काम करता है (updated demo)