फ़ोकस प्राप्त करते समय टेक्स्टबॉक्स व्यूपोर्ट को कैसे स्थानांतरित करें?

Question

मेरे पास एक टेक्स्टबॉक्स है जिसमें टेक्स्टबॉक्स आकार से स्ट्रिंग्स बड़े हो सकते हैं। जब मैं टाइप कर रहा हूं, तो टेक्स्टबॉक्स "व्यूपोर्ट" हमेशा टाइप किए गए अंतिम अक्षर को दिखाने के लिए चलता है (उदाहरण के लिए जब आप एक SO प्रश्न में एक बहुत बड़ा शीर्षक लिखते हैं)।

समस्या यह है कि यदि टेक्स्टबॉक्स फोकस खो देता है, तो जब यह फिर से केंद्रित होता है तो व्यूपोर्ट हमेशा टेक्स्ट की शुरुआत में सेट होता है, और मैं इसे अंत में चाहता हूं।

मैंने टेक्स्ट के अंत में प्रोग्रामेटिक रूप से कैरेट को स्थानांतरित करने की कोशिश की और यह काम करता है, लेकिन व्यूपोर्ट अभी भी टेक्स्ट की शुरुआत में है, इसलिए उपयोगकर्ता को अभी भी व्यूपोर्ट को अंत में ले जाने के लिए कोई भी कुंजी दबानी है पाठ।

उदाहरण

यह खोने फोकस से पहले पाठ बॉक्स है:

alt text http://img35.imageshack.us/img35/6697/10437837.jpg

और यह ध्यान देने के बाद खो दिया है:

alt text http://img11.imageshack.us/img11/1390/33816597.jpg

मुझे लगता है कि चाहते हैं जब txtbox लाभ फिर व्यूपोर्ट पर ध्यान केंद्रित करता है पहली छवि में सेट है।

ऐसा करना संभव है?

Answer 1

सूरी, लेकिन मुझे नहीं लगता कि यह संभव है। कम से कम स्वच्छ और ब्राउज़र-अनुरूप तरीके से नहीं।

Answer 2

एक तरीका है कि थोड़ा हैक-वाई फोकस खो जाने के बाद टेक्स्ट बॉक्स को गतिशील रूप से पुनः लोड करना होगा।

बस एक चर में स्ट्रिंग को स्टोर करें और टेक्स्ट-फ़ील्ड को हटा दें, फिर इसे $ .html() या इसमें स्ट्रिंग के साथ जो भी तरीका पसंद है उसे वापस जोड़ें।

सरल, ब्राउज़र में काम करता है, लेकिन थोड़ा हैक-वाई।

Answer 3

ठीक है, आप ब्राउज़र और घटना सीमाओं से जूझ रहे हैं।

आप यूआई-इवेंट को इस तरह से अनुकरण नहीं कर सकते कि यह मानव संपर्क की नकल करता है (यह एक सुरक्षा समस्या है)। हालांकि, कुछ डीओएम तत्वों में पाठ के नियंत्रण में हेरफेर करने के कुछ अंतर्निहित तरीके हैं - टेक्स्टरेरा तत्व इसके चयन के साथ इसका एक अच्छा उदाहरण है स्टार्ट/चयन अंत (ब्राउज़र-विशिष्ट कार्यान्वयन) चर। आपको शायद ध्यान दें कि फ़ायरफ़ॉक्स में, चयन स्टार्ट/selectEnd अपना वांछित प्रभाव बनाते हैं, लेकिन फिर, केवल फ़ायरफ़ॉक्स के नीचे।

तो, आपकी समस्या को क्रॉस-ब्राउज़र तरीके से हल नहीं किया जा सकता है। आपको टेक्स्ट स्लाइसिंग और आगे के माध्यम से प्रभाव को अनुकरण करने के लिए जाना होगा।

यहां एक त्वरित छद्म कोड मैं क्या मतलब है की उदाहरण है:

element.onblur = function (event) { 
    this.hidden = this.value; 
    if (this.value.length > (this.offsetsetWidth/12)) { 
     this.shown = this.value.slice(this.value.length - (this.offsetWidth/12)); 
     this.value = this.shown; 
    } 
}; 

element.onfocus = function (event) { 
    this.value = this.hidden || this.value; 
}; 

टुकड़ा यहाँ हैक तत्व की चौड़ाई के एक monospaced फ़ॉन्ट की चौड़ाई (12px) के एक अनुपात (पर आधारित है यह कुछ भी हो सकता है)। इसलिए, अगर हमारे पास 144 पीएक्स का एक बॉक्स है और हम एक मोनोस्पेस्ड फ़ॉन्ट से निपट रहे हैं, तो हम जानते हैं कि हम एक समय में बॉक्स में 12 अक्षरों को फिट कर सकते हैं - इसलिए, हम इस तरह से टुकड़े करते हैं।((-) डब्ल्यू/12 से 24) 'वें स्ट्रिंग में स्थिति

इनपुट में मूल्य की लंबाई 24 वर्ण है, तो हम पर काट करने के लिए सरल गणित है।

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

Answer 4

मुझे लगता है कि मैं अन्य हैक्स और इस तरह के बारे में बात कर जवाब पढ़ने के बाद प्रश्न पढ़ने में भूलना हो सकता है, लेकिन मैं एक साथ एक त्वरित नमूना है कि IE8 और Firefox 3.5.2 में ठीक काम करता है दस्तक दी। यह मानते हुए कि एक आईडी = "टेस्ट" और निम्नलिखित समारोह onFocus बुला के साथ एक इनपुट तत्व:

function TestFocus() 
{ 
    var Test = document.getElementById("Test"); 
    if (document.selection) 
    { 
      var SEnd = document.selection.createRange(); 
      SEnd.moveStart("character", Test.value.length); 
      SEnd.select(); 
    } 
    else if (Test.setSelectionRange) 
    { 
     Test.setSelectionRange(Test.value.length, Test.value.length); 

     //- Firefox work around, insert a character then delete it 
     var CEvent = document.createEvent("KeyboardEvent"); 
     if (CEvent.initKeyEvent) 
     { 
      CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32); 
      Test.dispatchEvent(CEvent); 
      CEvent = document.createEvent("KeyboardEvent"); 
      CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0); 
      Test.dispatchEvent(CEvent); 
     } 
    } 
    //- The following line works for Chrome, but I'm not sure how to set the caret position 
    Test.scrollLeft = Test.scrollWidth; 
} 

Firefox में, यह initKeyEvent का उपयोग करता है एक अंतरिक्ष कुंजी और फिर backspace कुंजी के तुरंत बाद भेजने के लिए। क्रोम में, मुझे यकीन नहीं है कि कैरेट को अंत में कैसे सेट किया जाए, लेकिन इनपुट पर scrollLeft सेट करना लगभग काम करता है, हो सकता है कि आप इसके साथ थोड़ा सा खेल सकें? ओपेरा के लिए, मुझे कोई जानकारी नहीं है। मुझे उम्मीद है कि यह आपको अपने रास्ते पर मदद करता है।

Answer 5

पाठ बॉक्स के पाठ के अनुरूप सीएसएस गुण सेट गठबंधन सही करने के लिए जब ध्यान केंद्रित खोने।

mootools के साथ:

$('#yourtextboxid').setStyle('text-align', 'right');