दिलचस्प पोस्ट
CUDA मेमोरी कैसे प्रबंधित है? एक तत्व दूसरे के भीतर निहित है, तो कैसे जावास्क्रिप्ट में जांच करने के लिए एक मौजूदा होरोकू एप के साथ एक फ़ोल्डर को कैसे लिंक करें सबसे नज़दीकी पड़ोसी टाइलिंग द्वारा डुप्लिकेट करने के लिए त्वरित तरीका अधिकतम एकल-बिक्री लाभ कोनालर 2 – एनजीफ़ोर नंबर का उपयोग करने के बजाय संग्रह setInterval क्रोम पर ठीक से काम नहीं कर रहा है आवश्यकताएँ और बंडल जावास्क्रिप्ट का उपयोग कब करना है? गिट में बदलावों को छोड़ने में प्रतीत नहीं हो सकता कस्टम चेकबॉक्स छवि एंड्रॉइड मटैब में गति-कुशल वर्गीकरण क्यों जावा में multithreading से एक थ्रेड तेज है? Laravel 5 क्लास 'फॉर्म' नहीं मिला अंतिम डाक कोड और ज़िप रीगेक्स क्या है? एएसपी.नेट एमवीसी 4 में कस्टम सदस्यता और भूमिका प्रदाता

मूल्य की चौड़ाई के लिए ऑटो-स्केलिंग इनपुट ?

क्या एक <input type="text"> की चौड़ाई को वास्तविक मान की चौड़ाई पर स्केल करने का एक तरीका है?

Solutions Collecting From Web of "मूल्य की चौड़ाई के लिए ऑटो-स्केलिंग इनपुट ?"

इनपुट सामग्री की लंबाई में size विशेषता सेट करके आप यह आसान तरीका कर सकते हैं:

 function resizeInput() { $(this).attr('size', $(this).val().length); } $('input[type="text"]') // event handler .keyup(resizeInput) // resize on page load .each(resizeInput); 

देखें: http://jsfiddle.net/nrabinowitz/NvynC/

ऐसा लगता है कि मुझे कुछ संदेह है जो ब्राउजर पर निर्भर है। यदि आप चाहें तो इनपुट के लिए वास्तव में तंग होना चाहते हैं, तो आप इस तकनीक के बारे में इस संबंधित उत्तर में वर्णन कर सकते हैं, जो कि आपके पाठ के पिक्सेल आकार की गणना करने के लिए jQuery का उपयोग कर सकते हैं।

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

 <span contenteditable="true">dummy text</span> 

ध्यान दें कि यह एक हैक का अधिक है और उपयोगकर्ताओं को प्रवेश (और पेस्ट) लाइनब्रेक, लिंक और अन्य एचटीएमएल के रूप में पूरी तरह से अनिश्चित HTML इनपुट की अनुमति देने के गंभीर दोष हैं।

तो आप शायद इस समाधान का उपयोग न करें जब तक कि आप इनपुट को बहुत सावधानी से नहीं ले रहे हों …

अद्यतन : आप शायद ओब्सीडियन का समाधान नीचे का उपयोग करना चाहते हैं

संपादित करें : प्लगइन अब व्हाट्सपेस वर्णों के पीछे काम करता है। @JavaSpyder को इंगित करने के लिए धन्यवाद

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

उदाहरण: https://jsfiddle.net/587aapc2/

उपयोग: $("input").autoresize({padding: 20, minWidth: 20, maxWidth: 300});

लगाना:

 //JQuery plugin: $.fn.textWidth = function(_text, _font){//get width of text with font. usage: $("div").textWidth(); var fakeEl = $('<span>').hide().appendTo(document.body).text(_text || this.val() || this.text()).css({font: _font || this.css('font'), whiteSpace: "pre"}), width = fakeEl.width(); fakeEl.remove(); return width; }; $.fn.autoresize = function(options){//resizes elements based on content size. usage: $('input').autoresize({padding:10,minWidth:0,maxWidth:100}); options = $.extend({padding:10,minWidth:0,maxWidth:10000}, options||{}); $(this).on('input', function() { $(this).css('width', Math.min(options.maxWidth,Math.max(options.minWidth,$(this).textWidth() + options.padding))); }).trigger('input'); return this; } //have <input> resize automatically $("input").autoresize({padding:20,minWidth:40,maxWidth:300}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input value="i magically resize"> <br/><br/> called with: $("input").autoresize({padding: 20, minWidth: 40, maxWidth: 300}); 

एक सरल लेकिन पििक्सल परफेक्ट सॉल्यूशन

मैंने ऐसा करने के कई तरीके देखे हैं लेकिन फोंट की चौड़ाई की गणना करना हमेशा 100% सटीक नहीं है, यह सिर्फ एक अनुमान है।

मैं एक छिपे हुए प्लेसहोल्डर को मापने के लिए इनपुट चौड़ाई को समायोजित करने का एक पिक्सेल सही तरीके से बनाने में कामयाब रहा।

 $(function(){ $('#hide').text($('#txt').val()); $('#txt').width($('span').width()); }).on('input', function () { $('#hide').text($('#txt').val()); $('#txt').width($('span').width()); }); 
 body, #txt, #hide{ font:inherit; margin:0; padding:0; } #txt{ border:none; color:#888; min-width:10px; } #hide{ display:none; white-space:pre; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Lorem ipsum <span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu. </p> 

मेरे पास GitHub पर एक jQuery प्लगइन है: https://github.com/MartinF/jQuery.Autosize.Input

यह इनपुट के मूल्य को दर्पण करता है, चौड़ाई की गणना करता है और इनपुट की चौड़ाई को सेट करने के लिए इसका उपयोग करता है।

आप यहां एक लाइव उदाहरण देख सकते हैं: http://jsfiddle.net/mJMpw/2175/

इसे कैसे उपयोग करें इसका उदाहरण (क्योंकि जेएसएफडियल लिंक पोस्ट करते समय कुछ कोड की आवश्यकता होती है):

 <input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' /> input[type="data-autosize-input"] { width: 90px; min-width: 90px; max-width: 300px; transition: width 0.25s; } 

आप बस न्यूनतम / अधिकतम-चौड़ाई सेट करने के लिए सीएसएस का उपयोग करते हैं और यदि आप एक अच्छा प्रभाव चाहते हैं तो चौड़ाई पर एक संक्रमण का उपयोग करें।

आप इनपुट तत्व पर डेटा-ऑटोसाइज़-इनपुट विशेषता के लिए जेसन नोटेशन में मान के रूप में अंत में स्थान / दूरी निर्दिष्ट कर सकते हैं।

बेशक आप बस इसे jQuery का उपयोग कर आरंभ कर सकते हैं

 $("selector").autosizeInput(); 

पहले से बहुत अच्छे उत्तर यहां दिए गए हैं। मज़े के लिए, मैंने नीचे दिए गए इस समाधान को अन्य उत्तरों और अपने विचारों के आधार पर लागू किया है।

 <input class="adjust"> 

इनपुट तत्व को पिक्सेल सटीक समायोजित किया गया है और एक अतिरिक्त ऑफसेट परिभाषित किया जा सकता है।

 function adjust(elements, offset, min, max) { // Initialize parameters offset = offset || 0; min = min || 0; max = max || Infinity; elements.each(function() { var element = $(this); // Add element to measure pixel length of text var id = btoa(Math.floor(Math.random() * Math.pow(2, 64))); var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({ 'display': 'none', 'font-family': element.css('font-family'), 'font-size': element.css('font-size'), }).appendTo('body'); // Adjust element width on keydown function update() { // Give browser time to add current letter setTimeout(function() { // Prevent whitespace from being collapsed tag.html(element.val().replace(/ /g, '&nbsp')); // Clamp length and prevent text from scrolling var size = Math.max(min, Math.min(max, tag.width() + offset)); if (size < max) element.scrollLeft(0); // Apply width to element element.width(size); }, 0); }; update(); element.keydown(update); }); } // Apply to our element adjust($('.adjust'), 10, 100, 500); 

समायोजन एक सीएसएस संक्रमण के साथ smoothed हो जाता है

 .adjust { transition: width .15s; } 

यहाँ बेला है मुझे उम्मीद है कि यह दूसरों को एक स्वच्छ समाधान की तलाश में मदद कर सकता है

आप यहां इस समस्या को हल कर सकते हैं 🙂 http://jsfiddle.net/MqM76/217/

HTML:

 <input id="inpt" type="text" /> <div id="inpt-width"></div> 

जे एस:

 $.fn.textWidth = function(text, font) { if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); return $.fn.textWidth.fakeEl.width(); }; $('#inpt').on('input', function() { var padding = 10; //Works as a minimum width var valWidth = ($(this).textWidth() + padding) + 'px'; $('#'+this.id+'-width').html(valWidth); $('#inpt').css('width', valWidth); }).trigger('input'); 

एक div बनाने और इसकी चौड़ाई को मापने की कोशिश करने की बजाय, मुझे लगता है कि एक कैनवास तत्व का उपयोग करके चौड़ाई सीधे मापने के लिए अधिक विश्वसनीय है जो अधिक सटीक है

 function measureTextWidth(txt, font) { var element = document.createElement('canvas'); var context = element.getContext("2d"); context.font = font; return context.measureText(txt).width; } 

अब आप इसका उपयोग करके इसे मापने के लिए उपयोग कर सकते हैं कि कुछ इनपुट तत्व की चौड़ाई किसी भी समय ऐसा कर करनी चाहिए:

 // assuming inputElement is a reference to an input element (DOM, not jQuery) var style = window.getComputedStyle(inputElement, null); var text = inputElement.value || inputElement.placeholder; var width = measureTextWidth(text, style.font); 

यह एक संख्या (संभवतः फ़्लोटिंग बिंदु) देता है यदि आप पैडिंग के लिए अकाउंट करना चाहते हैं तो आप यह कोशिश कर सकते हैं:

  var desiredWidth = (parseInt(style.borderLeftWidth) + parseInt(style.paddingLeft) + Math.ceil(width) + 1 + // extra space for cursor parseInt(style.paddingRight) + parseInt(style.borderRightWidth)) inputElement.style.width = desiredWidth + "px"; 

दुर्भाग्य से size विशेषता बहुत अच्छी तरह से काम नहीं करेगा। फ़ॉन्ट के सेट अप के आधार पर, कभी-कभी अतिरिक्त स्थान और बहुत कम स्थान होगा। (उदाहरण देखें)

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

निम्नलिखित उदाहरण में, मैं इसे 1 के लिए इनपुट का size सेट कर रहा हूं ताकि इसे scrollWidth होने से रोकने के लिए हमारी प्रारंभिक चौड़ाई (सीएसएस के साथ मैन्युअल रूप से सेट) से अधिक हो।

 // (no-jquery document.ready) function onReady(f) { "complete" === document.readyState ? f() : setTimeout(onReady, 10, f); } onReady(function() { [].forEach.call( document.querySelectorAll("input[type='text'].autoresize"), registerInput ); }); function registerInput(el) { el.size = 1; var style = el.currentStyle || window.getComputedStyle(el), borderBox = style.boxSizing === "border-box", boxSizing = borderBox ? parseInt(style.borderRightWidth, 10) + parseInt(style.borderLeftWidth, 10) : 0; if ("onpropertychange" in el) { // IE el.onpropertychange = adjust; } else if ("oninput" in el) { el.oninput = adjust; } adjust(); function adjust() { // reset to smaller size (for if text deleted) el.style.width = ""; // getting the scrollWidth should trigger a reflow // and give you what the width would be in px if // original style, less any box-sizing var newWidth = el.scrollWidth + boxSizing; // so let's set this to the new width! el.style.width = newWidth + "px"; } } 
 * { font-family: sans-serif; } input.autoresize { width: 125px; min-width: 125px; max-width: 400px; } input[type='text'] { box-sizing: border-box; padding: 4px 8px; border-radius: 4px; border: 1px solid #ccc; margin-bottom: 10px; } 
 <label> Resizes: <input class="autoresize" placeholder="this will resize" type='text'> </label> <br/> <label> Doesn't resize: <input placeholder="this will not" type='text'> </label> <br/> <label> Has extra space to right: <input value="123456789" size="9" type="text"/> </label> 

मेरे jQuery प्लगइन मेरे लिए काम करता है:

उपयोग:

  $('form input[type="text"]').autoFit({ }); 

jquery.auto-fit.js का स्रोत कोड:

 ; (function ($) { var methods = { init: function (options) { var settings = $.extend(true, {}, $.fn.autoFit.defaults, options); var $this = $(this); $this.keydown(methods.fit); methods.fit.call(this, null); return $this; }, fit: function (event) { var $this = $(this); var val = $this.val().replace(' ', '-'); var fontSize = $this.css('font-size'); var padding = $this.outerWidth() - $this.width(); var contentWidth = $('<span style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; display: inline-block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth(); $this.width((contentWidth + padding) + 'px'); return $this; } }; $.fn.autoFit = function (options) { if (typeof options == 'string' && methods[options] && typeof methods[options] === 'function') { return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof options === 'object' || !options) { // Default to 'init' return this.each(function (i, element) { methods.init.apply(this, [options]); }); } else { $.error('Method ' + options + ' does not exist on jquery.auto-fit.'); return null; } }; $.fn.autoFit.defaults = {}; })(this['jQuery']); 

इनपुट तत्व अन्य तत्वों से अलग तरीके से व्यवहार करते हैं, जो कि आप क्या चाहते हैं, यदि आप उन्हें float: left देते हैं तो इसके बारे में क्या करना होगा float: left (देखें http://jsfiddle.net/hEvYj/5/ ) मुझे नहीं लगता कि यह जावास्क्रिप्ट के साथ किसी तरह की गणना के बिना संभव है (यानी बॉक्स में प्रति अक्षर चौड़ाई 5px जोड़ें)।

प्रयोक्ता नेबिनोविट्ज़ का समाधान महान काम कर रहा है, लेकिन मैं keyup बजाय keyup की घटना का उपयोग करता keyup । यह विलंबता कम कर देता है अगर उपयोगकर्ता धीरे-धीरे

यहां नबिनोविट्ज़ के समाधान का मेरा संशोधन है मैंने आकार की संपत्ति का उपयोग नहीं किया, क्योंकि यह आनुपातिक फ़ोंट के साथ सही नहीं है जैसा @ मार्क नोट किया गया है मेरा समाधान आपके इनपुट के बाद एक तत्व रखता है और ब्राउज़र द्वारा चौड़ाई की गणना करता है (jQuery का उपयोग कर)

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

फ़ोकसआउट इवेंट में इनपुट चौड़ाई में बदलाव होता है, जो मेरे लिए बेहतर काम करता है लेकिन जब आप टाइप करते हैं तो इनपुट की चौड़ाई को बदलने के लिए आप कुंजीप / कीप्रेस का उपयोग कर सकते हैं।

 function resizeInput() { //Firstly take the content or placeholder if content is missing. var content = $(this).val().length > 0 ? $(this).val() : $(this).prop("placeholder"); //Create testing element with same content as input. var widthTester = $("<span>"+content+"</span>").hide(); //Place testing element into DOM after input (so it inherits same formatting as input does). widthTester.insertAfter($(this)); //Set inputs width; you may want to use outerWidth() or innerWidth() //depending whether you want to count padding and border or not. $(this).css("width",widthTester.width()+"px"); //Remove the element from the DOM widthTester.remove(); } $('.resizing-input').focusout(resizeInput).each(resizeInput); 

कैनवास का उपयोग हम तत्वों की चौड़ाई की गणना कर सकते हैं:

 function getTextWidth(text, fontSize, fontName) { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); context.font = fontSize + fontName; return context.measureText(text).width; } 

और इसे चुने गए घटना पर प्रयोग करें:

 function onChange(e) { let width = getTextWidth(this.value, $(this).css('font-size'), $(this).css('font-family')); $(this.input).css('width', width); } 

कैनवास उपाय टेस्ट समाधान का प्रयास करें

सीएसएस:

  input{ min-width:10px!important; max-width:99.99%!important; transition: width 0.1s; border-width:1px; } 

जावास्क्रिप्ट:

 function getWidthOfInput(input){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var text = input.value.length ? input.value : input.placeholder; var style = window.getComputedStyle(input); ctx.lineWidth = 1; ctx.font = style.font; var text_width = ctx.measureText(text).width; return text_width; } function resizable (el, factor) { function resize() { var width = getWidthOfInput(el); el.style.width = width + 'px'; } var e = 'keyup,keypress,focus,blur,change'.split(','); for (var i in e){ el.addEventListener(e[i],resize,false); } resize(); } $( "input" ).each( function(i){ resizable(this); });