क्रोम सेट चयन चयन() ऑनपूट हैंडलर

Question

में काम नहीं करता है मैं कुछ ऑटो-समापन कोड के साथ काम कर रहा हूं। setSelectionRange() का उपयोग टेक्स्ट को चुनने के लिए oninput ईवेंट हैंडलर में पूरा किया गया है। यह कम से कम फ़ायरफ़ॉक्स 14 में काम करता है, लेकिन क्रोम में नहीं (6, 17)।

सरलीकृत कोड समस्या का प्रदर्शन टुकड़ा इस तरह है:

<input type='text' oninput='select()' /> 

function select(e){ 
    var s = this.value; 
    if (s.length) 
     this.setSelectionRange(s.length-1, s.length); 
} 

मैं क्रोम में कोड डिबग, और यह है कि पाठ पहला अधिकार पर चयनित किया गया है के बाद setSelectionRange() फांसी दे दी जाती पता चला है , लेकिन चयन बाद में गायब हो गया।

तो मैं onclick बजाय oninput को हैंडलर बाँध, इस तरह:

<input type='text' onclick='select()' /> 

तो दोनों ब्राउज़र ठीक काम करते हैं।

क्या कोई मुझे क्रोम में चयन कार्य करने के लिए कुछ सुराग दे सकता है?

Answer 1

, अपने कोड के साथ कुछ समस्याएं हैं अर्थात् जो मानदंडों को select() समारोह में पारित कर दिया गलत कर रहे हैं: thiswindow हो जाएगा और e अपरिभाषित कर दिया जाएगा। इसके अलावा, select()oninput गुणों के भीतर फ़ंक्शन नाम के रूप में उपयोग करने से समस्या उत्पन्न होती है क्योंकि चयन इनपुट के select() विधि को हल करेगा। इवेंट हैंडलर विशेषता के बजाए इवेंट हैंडलर को स्क्रिप्ट में सेट करने के लिए आमतौर पर एक बेहतर तरीका होता है।

हालांकि, इन मुद्दों को ठीक करने के बाद भी समस्या मौजूद है। संभावित रूप से input घटना ब्राउज़र से पहले क्रोम में कैरेट ले जाने से पहले आग लगती है। टाइमर का उपयोग करना एक साधारण कामकाज होगा, हालांकि यह उप-इष्टतम है क्योंकि उपयोगकर्ता की टाइमर आग से पहले एक और चरित्र इनपुट करने में सक्षम होने की संभावना है।

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

कोड:

<input type="text" oninput="selectText(this)"> 

<script type="text/javascript"> 
function selectText(input) { 
    var s = input.value; 
    if (s.length) { 
     window.setTimeout(function() { 
      input.setSelectionRange(s.length-1, s.length); 
     }, 0); 
    } 
} 
</script>