अपनी सामग्री को फिट करने के लिए इनपुट का आकार बदलें

Question

मुझे एक विशिष्ट तकनीक की परवाह नहीं है, यह जेएस, सीएसएस या यहां तक ​​कि कुछ मानक और बुरा HTML गुण भी हो सकता है। अगर उपयोगकर्ता सही सीमा पर टाइप करता है तो मुझे बड़ा होने के लिए input चाहिए।

Answer 1

हो सकता है कि किसी और एक बेहतर तरीका है, लेकिन आप इस कोशिश कर सकते:

उदाहरण:http://jsfiddle.net/aAueA/1/

var input = document.getElementsByTagName('input')[0]; 

input.onkeypress = input.onkeydown = function() { 
    this.size = (this.value.length > 10) ? this.value.length : 10; 
}; 

यह यह 10 की एक न्यूनतम आकार में सेट करता है और फैलता है यदि आप 10 के पार जाने वर्ण।

शायद एक निश्चित चौड़ाई फ़ॉन्ट के साथ सबसे अच्छा काम करता है:

input { 
    font-family:Courier; 
} 

Answer 2

का उपयोग करके ब्राउज़र चौड़ाई के गणना करते हैं एक divcontenteditable साथ सेट true करने के लिए।

<div class="pseudo-input" contenteditable="true">Resizes to my content!</div> 

, ब्राउज़र समर्थन http://caniuse.com/#feat=contenteditable

Answer 3

तुम भी div तत्व बना सकते हैं के साथ कोई समस्या नहीं हो यह करने के लिए अपने इनपुट शैली को कॉपी करें और आयाम है इनपुट आकार बदलने के लिए उपयोग करना चाहिए। (चुना गया एकाधिक उपयोग this solution)।

var input = $('input'), 
    dummy = $('<div style="position:absolute; left: -1000%;">').appendTo('body'); 

['font-size', 'font-style', 'font-weight', 'font-family', 
'line-height', 'text-transform', 'letter-spacing'].forEach(function(index) { 
    dummy.css(index, input.css(index)); 
}); 

input.on('input', function() { 
    dummy.html(this.value); 
    input.width(dummy.width()); 
}); 

यूपीडी: स्पेस आकार का पालन करने के लिए पूर्व के बजाय पूर्व का उपयोग करने के लिए बेहतर है।