किसी इनपुट HTML तत्व की चौड़ाई की गणना कैसे करें ताकि यह उसकी सामग्री के आकार से मेल खा सके?

Question

किसी इनपुट HTML तत्व की चौड़ाई की गणना कैसे करें ताकि यह उसकी सामग्री के आकार से मेल खा सके? मैं पहले से ही उपयोगकर्ता प्रकार के रूप में मक्खी पर एक इनपुट अद्यतन:

<input type='text' onkeydown='this.size=this.value.length' /> 

बहरहाल, यह पूरी तरह से सही प्रतीत नहीं होता है, क्योंकि यह खाते में तथ्य नहीं ले करता है कि कुछ पात्रों दूसरों की तुलना में लंबे समय तक रहे:

• मैं अगर मैं केवल कुछ "l" वर्ण
• आकार अपर्याप्त है, तो मैं केवल कुछ "डब्ल्यू" वर्ण लिखने हो जाएगा टाइप अधिक से अधिक खाली स्थान के मिल जाएगा

कैसे आगे बढ़ें?

पीएस: मैं ऐसा क्यों करना चाहता हूं (पहले से ही उत्तर में दिए गए उत्तर में इसका उत्तर दिया गया है)? मेरे पास वाक्यों में मुझे ब्रैकेट सामग्री को इनपुट द्वारा प्रतिस्थापित करना है (उदा: [उपयोगकर्ता] [वर्ष] पुराना है)। मुझे नहीं पता कि वाक्य क्या हो सकता है, इसलिए मुझे इनपुट के लिए पर्याप्त लंबाई नहीं पता है, और मैं इसे एक पंक्ति पर पढ़ने योग्य रखना चाहता हूं (बहुत अधिक सफेद जगह से परहेज करना)।

Answer 1

आप अपनी स्ट्रिंग की चौड़ाई प्राप्त करने के लिए संदर्भ के एक (छिपे हुए) कैनवास और measureText() विधि का उपयोग कर सकते हैं।

संपादित करें:

लगता fast enough।

Answer 2

सबसे पहले, कुछ सीएसएस

var div = document.createElement("div"); 
div.id = "input-helper"; 
document.body.appendChild(div); 

var input = document.querySelector("input"); 

input.addEventListener("keyup", function() { 
    div.textContent = this.value; 
    input.style.width = div.offsetWidth + "px"; 
});​ 

jsFiddle परिभाषित ...

input, 
#input-helper { 
    display: inline; 
    font-size: 14px; 
    font-family: serif; 
    line-height: 16px; 
} 

#input-helper { 
    position: absolute; 
    top: -10000px; 
} 

... तो कुछ जावास्क्रिप्ट का उपयोग करें ...।

आप अपने input तत्व के लिए भी एक उचित प्रारंभ चौड़ाई चुनना चाहते हैं।

Answer 3

यदि jQuery का उपयोग करना कोई समस्या नहीं है, तो यहां एक डेमो है जिसे मैंने jsFiddle पर एक साथ रखा है। यह Autoexpand.js फ़ाइल का उपयोग करता है जो आप चाहते हैं। पहेली में आखिरी उदाहरण देखें।

कुछ बारीकियों:

1. यह .keyup और सबसे तेजी से प्रतिक्रिया संभव के लिए .keypress पर आधारित है।
2. यह एचटीएमएल मार्कअप को ध्यान में रखता है जो बॉक्स में चिपकाया जाता है। लाइनब्रेक्स जैसी चीजें निपटाई जाती हैं।
3. स्रोत फ़ाइल फ़ॉन्ट के बारे में सब कुछ ले कर स्मार्ट प्रोसेसिंग दिखाती है।

इसके अलावा jsFiddle में शामिल लिंक के बाद से IE8 में jsFiddle सैंडबॉक्स टूट जाता है बेला की एक pastebin संस्करण डाउनलोड करने के लिए कर रहे हैं। उस ने कहा, यह भी आईई 7 में काम करता है!

Answer 4

पहले: इस div अपने इच्छित स्थान पर

<div id="calcsize" style="display:none;"></div> 

दूसरा जोड़ें: इस समारोह उपयोग

function getWidthof(txt) 
{ 
    $('#calcsize').empty().append(txt); 
    return $('#calcsize').width(); 
}