इनपुट क्षेत्र की चौड़ाई को उसके इनपुट में समायोजित करें

171 
<html>
  <head>
  </head>
  <body>
    <input type="text" value="1" style="min-width:1px;" />
  </body>
</html>

यह मेरा कोड है और यह काम नहीं कर रहा है। न्यूनतम चौड़ाई निर्धारित करने के लिए HTML, जावास्क्रिप्ट, PHP या CSS में कोई अन्य तरीका है?

मैं एक गतिशील रूप से बदलती चौड़ाई के साथ एक पाठ इनपुट क्षेत्र चाहता हूं, ताकि इसकी सामग्री के चारों ओर इनपुट क्षेत्र तरल पदार्थ हो। हर इनपुट में अंतर्निहित पैडिंग होती है 2em, यही समस्या है और दूसरी समस्या यह है कि min-widthइनपुट पर काम नहीं किया जा रहा है।

अगर मैं पूरे कार्यक्रम की तुलना में अधिक चौड़ाई निर्धारित करता हूं तो यह गड़बड़ है, मुझे 1px की चौड़ाई की आवश्यकता है, और केवल अगर यह आवश्यक है।

javascript  html  css 
— Kerc
स्रोत
क्या इससे आपके सवाल का जवाब मिलता है? ऑटो-आकार के साथ एक textarea बनाना
— DreamTeK

जवाबों:

96

ऐसा लगता है कि आपकी अपेक्षा यह है कि शैली को टेक्स्टबॉक्स की सामग्री के आधार पर टेक्स्टबॉक्स की चौड़ाई पर गतिशील रूप से लागू किया जाए। यदि ऐसा है तो आपको पाठ्य सामग्री बदलने के लिए कुछ js की आवश्यकता होगी, कुछ इस तरह से :

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

नोट: यह समाधान तभी काम करता है जब हर वर्ण बिलकुल 8pxचौड़ा हो।

— Tahbaza
स्रोत
41
@ केर और तहबाजा: हां, लेकिन यह तभी काम करेगा जब हर चरित्र की चौड़ाई 8 पिक्सल हो।
— मार्सेल कोर्पेल
6
मैं सहमत हूं, मार्सेल (और पोस्ट कोड कुछ ऐसा नहीं है जिसे मैं वास्तव में उपयोग कर सकता हूं) लेकिन यह वांछित व्यवहार प्रदर्शित करता है। क्या आपको पता है कि प्रदान किए गए पाठ की वास्तविक चौड़ाई की गणना फॉन्ट, साइज़, वज़न, कर्निंग आदि में कैसे की जाती है? यदि हां, तो कृपया साझा करें क्योंकि मुझे उस अवसर पर उपयोगी कोड के कुछ बिट मिलेंगे।
— तहबाजा
1
- मैंने पहले ही सोचा था कि यह केवल एक उदाहरण था। हालांकि इनपुट की चौड़ाई की गणना करना उतना मुश्किल नहीं है। मेरे जवाब पर एक नजर।
— मार्सेल कोर्पेल
em इकाइयाँ "m" अक्षर की चौड़ाई हैं। यह एक स्ट्रिंग की चौड़ाई की गणना के लिए उपयोगी होगा। मैंने कुछ विशेषताओं पर लागू होने वाली इम इकाइयों के साथ क्रॉस-ब्राउज़र के मुद्दों को देखा है, हालांकि इसे परीक्षण करते हैं।
— आर्कॉन
7
आप PASTE की घटना को भूल चुके हैं मेरे दोस्त;) आपको इसे बदल देना चाहिएonInput
— vsync
114

आधुनिक ब्राउज़र संस्करणों में, सीएसएस इकाई chभी उपलब्ध है। मेरी समझ से, यह फ़ॉन्ट-स्वतंत्र इकाई है, जहां 1chचरित्र की चौड़ाई के बराबर है0 किसी भी फ़ॉन्ट में (शून्य) के ।

इस प्रकार, निम्नलिखित के रूप में सरल कुछ के रूप में इस्तेमाल किया जा सकता है आकार समारोह:

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}
input{ font-size:1.3em; padding:.5em; }
<input>
स्निपेट का विस्तार करें

यह उदाहरण मान "2 वर्ण" की लंबाई के लिए "एलएम" का आकार बदल देगा।

— जानी जलकला
स्रोत
13
मुझे आश्चर्य है कि इस टिप्पणी को अधिक मत दिया गया है, क्योंकि यह एक महान समाधान है और लगभग 95% ( 1 ) ब्राउज़र इसका समर्थन करते हैं।
— हस्की
8
यह बिल्कुल अच्छा जवाब नहीं है, क्योंकि माप सटीक नहीं है और खाता शैलियों को ध्यान में नहीं रखता है जो inputतत्व पर हो सकते हैं , जैसे कि font-style, letter-spacingऔर इसी तरह। मैंने लाइव डेमो के साथ उत्तर को संपादित किया है।
— १18 ’१18
5
बहुत अच्छा काम करता है यदि आप एक मोनोसैप्ड फ़ॉन्ट का उपयोग करते हैं। अन्य फोंट के साथ आपका माइलेज अलग-अलग हो सकता है क्योंकि यह 0 वर्ण की चौड़ाई का स्पष्ट रूप से उपयोग करता है।
— जिल्स वैन गुरप
2
यह वाकई शानदार है। हालांकि ध्यान दें कि यह कभी-कभी बग़ल में काम करता है / जब मैं उम्मीद करता हूं कि यह काम नहीं करता .है।
— ऋषव
1
यह पूरी तरह से काम करता है यदि आप 'सामग्री-बॉक्स' के इनपुट पर बॉक्स-साइज़िंग सेट करते हैं। इस तरह यह आकार सेट करते समय पैडिंग को अनदेखा करता है।
— हाइपरसैपियन
65

वर्तमान इनपुट की चौड़ाई की गणना करने के लिए, आपको इसे एक अस्थायी spanतत्व में एम्बेड करना होगा , उस चीज़ को DOM में संलग्न करना होगा, scrollWidthसंपत्ति का उपयोग करके गणना की गई चौड़ाई (पिक्सेल में) प्राप्त करें और spanफिर से हटा दें । निश्चित रूप से आपको यह सुनिश्चित करना होगा कि एक ही फ़ॉन्ट परिवार, फ़ॉन्ट आकार, आदि का उपयोग और inputसाथ ही में किया जाता हैspan तत्व जाता है। इसलिए मैंने उन्हें वही क्लास सौंपी।

मैंने फ़ंक्शन को keyupघटना से keypressजोड़ा , चूंकि इनपुट चरित्र पर इनपुट में अभी तक जोड़ा नहीं गया है value, जिसके परिणामस्वरूप गलत चौड़ाई होगी। दुर्भाग्य से, मैं नहीं जानता कि इनपुट फ़ील्ड की स्क्रॉलिंग से कैसे छुटकारा पाएं (जब फ़ील्ड के अंत में वर्ण जोड़ते हैं); यह स्क्रॉल करता है, क्योंकि चरित्र को जोड़ा जाता है और पहले दिखाया adjustWidthOfInput()जाता है। और, जैसा कि मैंने कहा, मैं इसे दूसरे तरीके से नहीं कर सकता क्योंकि तब आपके पास पहले इनपुट फ़ील्ड का मूल्य होगा दबाए गए चरित्र को डालने । मैं बाद में इस मुद्दे को हल करने की कोशिश करूंगा।

BTW, मैंने केवल फ़ायरफ़ॉक्स (3.6.8) में यह परीक्षण किया है, लेकिन आप इस बात को प्राप्त करेंगे, मुझे उम्मीद है।

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Get/set width of &lt;input&gt;</title>
    <style>
      body {
        background: #666;
      }

      .input-element {
        border: 0;
        padding: 2px;
        background: #fff;
        font: 12pt sans-serif;
      }

      .tmp-element {
        visibility: hidden;
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <input id="theInput" type="text" class="input-element" value="1">
    <script>
      var inputEl = document.getElementById("theInput");

      function getWidthOfInput() {
        var tmp = document.createElement("span");
        tmp.className = "input-element tmp-element";
        tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        document.body.appendChild(tmp);
        var theWidth = tmp.getBoundingClientRect().width;
        document.body.removeChild(tmp);
        return theWidth;
      }

      function adjustWidthOfInput() {
        inputEl.style.width = getWidthOfInput() + "px";
      }

      adjustWidthOfInput();
      inputEl.onkeyup = adjustWidthOfInput;
    </script>
  </body>
</html>
— मार्सेल कोर्पेल
स्रोत
मुझे आपका उत्तर पसंद आया और यहां तक ​​कि इसे jQuery / Underscore: gist.github.com/3745941 का उपयोग करके लागू किया गया । हालाँकि, मैं कुछ अनुमान लगा सकता हूं: (1) किसी भी वर्ण की चौड़ाई 14px से अधिक नहीं है, (2) यह इनपुट तत्व को 14px पिछले तत्व के मान का विस्तार करने के लिए स्वीकार्य है। मैंने इसे एक कीडाउन इवेंट से जोड़ा है और यह बहुत अच्छा काम कर रहा है!
— नाथन
11
आप जोड़ना चाहिए white-space: pre;सीएसएस में इस तरह: .tmp-element{ visibility: hidden; white-space: pre;}। अन्यथा श्वेत-रिक्त स्थान संयुक्त हो जाते हैं और चौड़ाई गणना विफल हो जाती है। <input>और <span>व्हाइट-स्पेस हैंडलिंग के संबंध में अलग-अलग व्यवहार करता है, व्हाइट-स्पेस को <input>बरकरार रखता है और <span>यदि white-space: pre;जोड़ा नहीं जाता है तो अनुक्रमिक व्हाइट-स्पेस को एक में जोड़ता है।
— तिमो Kähkönen
2
tmp.getBoundingClientRect().widthकी तुलना में बेहतर है tmp.scrollWidth, क्योंकि है कि कभी कभी रिटर्न 0
— Lisak
@ लिसाक धन्यवाद, मैंने अपना उत्तर समायोजित कर दिया, लेकिन यहाँ पहले से ही बेहतर उत्तर हैं।
— मार्सेल कोर्पेल
बेहतर? मैं ऐसा नहीं कहूंगा। चिह्नित उत्तर में सटीकता की कमी है, अन्य (+ यहां 1 और यहां 2 ) jQuery का उपयोग करते हैं - मैं रिएक्ट के कारण नहीं। कैनवास आपको पाठ ऊंचाई AFAIK नहीं दे सकता है। विचार: रिक्त स्थान के साथ मुद्दा भी हल किया जा सकता है:.replace(/ /g, "&nbsp;")
— मिलान Jaros
30

यहां लाइथ के उत्तर का एक संशोधन है जो ध्यान में रखता है:

  • विलोपन
  • initialisation
  • प्लेसहोल्डर

यह किसी भी इनपुट क्षेत्र के लिए अनुमति देता है! इसे कार्रवाई में देखने के लिए: http://jsfiddle.net/4Qsa8/

स्क्रिप्ट:

$(document).ready(function () {
    var $inputs = $('.resizing-input');

    // Resize based on text if text.length > 0
    // Otherwise resize based on the placeholder
    function resizeForText(text) {
        var $this = $(this);
        if (!text.trim()) {
            text = $this.attr('placeholder').trim();
        }
        var $span = $this.parent().find('span');
        $span.text(text);
        var $inputSize = $span.width();
        $this.css("width", $inputSize);
    }

    $inputs.find('input').keypress(function (e) {
        if (e.which && e.charCode) {
            var c = String.fromCharCode(e.keyCode | e.charCode);
            var $this = $(this);
            resizeForText.call($this, $this.val() + c);
        }
    });

    // Backspace event only fires for keyup
    $inputs.find('input').keyup(function (e) { 
        if (e.keyCode === 8 || e.keyCode === 46) {
            resizeForText.call($(this), $(this).val());
        }
    });

    $inputs.find('input').each(function () {
        var $this = $(this);
        resizeForText.call($this, $this.val())
    });
});

अंदाज: 

.resizing-input input, .resizing-input span {
    font-size: 12px;
    font-family: Sans-serif;
    white-space: pre;
    padding: 5px;
}

HTML:

<div class="resizing-input">
    <input type="text" placeholder="placeholder"/>
    <span  style="display:none"></span>
</div>

कोड स्निपेट दिखाएं

— माइकल
स्रोत
ओ माइकल। आपका कोड बहुत अच्छा काम करता है लेकिन मुझे एक समस्या है। मेरा एक क्षेत्र एक Google स्थान स्वतः पूर्ण क्षेत्र है। और जब मैं गिराए गए मेनू से सही पता चुनता हूं, तो चुने गए पते की लंबाई के अनुसार इनपुट फ़ील्ड की चौड़ाई नहीं बदली जाती है। क्या इसके लिए कोई साधारण निर्धारण है?
— मैक्सेंस
2
@ घटना changeया inputघटना को सुनने के लिए पर्याप्त होगा
— yarwest
मेरे पास स्पैन के प्रदर्शन के साथ समस्या थी: कोई भी स्टाइल नहीं है क्योंकि यह स्पैन को 0 चौड़ाई के रूप में पंजीकृत करता है। दृश्यता के साथ पूर्ण स्थिति का उपयोग करने के लिए बेहतर है: स्पैन के लिए छिपा हुआ।
— jayt
हाय @ उत्तर पश्चिम, टिप के लिए धन्यवाद। किसी भी संयोग से आप जानेंगे कि इस सेटअप के साथ मूल स्क्रिप्ट को कैसे ट्विक किया जाए? (Js / jquery में मेरा ज्ञान बहुत सीमित है)
— मैक्सेंस
21

यहां केवल मोनोपॉज किए गए फ़ॉन्ट के बिना एक समाधान की आवश्यकता है, जावास्क्रिप्ट के केवल बहुत छोटे टुकड़े कोड के साथ , गणना की गई शैलियों की आवश्यकता नहीं है , और यहां तक ​​कि ime का समर्थन करें , आरटीएल ग्रंथों का समर्थन करें ।

// copy the text from input to the span
    $(function () {
      $('.input').on('input', function () { $('.text').text($('.input').val()); });
    });
    * {
      box-sizing: border-box;
    }
    
    .container {
      display: inline-block;
      position: relative;
    }
    
    .input,
    .text {
      margin: 0;
      padding: 2px 10px;
      font-size: 24px;
      line-height: 32px;
      border: 1px solid #ccc;
      box-radius: 3px;
      height: 36px;
      font: 20px/20px sans-serif;
      /* font: they should use same font; */
    }

    .text {
      padding-right: 20px;
      display: inline-block;
      visibility: hidden;
      white-space: pre;
    }
    
    .input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
    }
    
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<div class="container">
  <span class="text">
    some text
  </span>
  <input class="input" value="some text" />
</div>
स्निपेट का विस्तार करें

span.textपाठ की चौड़ाई फिट करने के लिए उपयोग करें , और इनपुट को position: absoluteकंटेनर से उसी आकार का होने दें । spanहर बार इसे बदलने पर इनपुट के मूल्य को कॉपी करें (आप कोड के इस टुकड़े को वेनिला जेएस में आसानी से बदल सकते हैं)। तो इनपुट सिर्फ अपनी सामग्री के आकार को "फिट" करेगा।

— TSH
स्रोत
18

एनआईसीईआर लुक एंड फेल के लिए

आपको दबाया हुआ पात्र प्राप्त करने के लिए String.fromCharCode (e.which) के संयोजन में jQuery के कीप () घटना का उपयोग करना चाहिए। इसलिए आप गणना कर सकते हैं कि आपकी चौड़ाई क्या होगी । क्यों? क्योंकि यह बहुत अधिक सेक्सी लगेगा :)

यहाँ एक jsfiddle है जो कीप इवेंट का उपयोग करके समाधानों की तुलना में एक अच्छा व्यवहार करता है: http://jsfiddle.net/G4FKW/3/

नीचे एक वेनिला जेएस है जो inputएक <input>तत्व की घटना को सुनता है और spanइसे मापने के लिए समान पाठ मान रखने के लिए एक भाई को सेट करता है।

document.querySelector('input').addEventListener('input', onInput)

function onInput(){
    var spanElm = this.nextElementSibling;
    spanElm.textContent = this.value; // the hidden span takes the value of the input; 
    this.style.width = spanElm.offsetWidth + 'px'; // apply width of the span to the input
};
/* it's important the input and its span have same styling */
input, .measure {
    padding: 5px;
    font-size: 2.3rem;
    font-family: Sans-serif;
    white-space: pre; /* white-spaces will work effectively */
}

.measure{  
  position: absolute;
  left: -9999px;
  top: -9999px;
}
<input type="text" />
<span class='measure'></span>
स्निपेट का विस्तार करें

— Lyth
स्रोत
1
अच्छा लग रहा है, लेकिन यह बैकस्पेस और डिलीट को ध्यान में नहीं रखता है।
— मार्सेल कोर्पल
हां, इसके लिए आपको कीडाउन इवेंट की जरूरत है। आप बैकस्पेस के लिए विशिष्ट हैंडलिंग जोड़ सकते हैं और ऐसा करके हटा सकते हैं (e.which === 46 हटाएं, e.which === 8 बैकस्पेस के लिए)। लेकिन आपको अभी भी बाकी के लिए e.charCode तक पहुंचने के लिए कीपर ईवेंट की आवश्यकता है।
— Ly
यदि आप IE8 का समर्थन नहीं कर रहे हैं, तो आप e.which की जाँच करने के बजाय oninput घटना का उपयोग कर सकते हैं: developer.mozilla.org/en-US/docs/Web/Events/input
— Frinsh
1
मैंने jQuery को खत्म करने और केवल वेनिला JS का उपयोग करने के लिए आपके उत्तर को संपादित किया है। ध्यान रखें कि यह समाधान इष्टतम से बहुत दूर है क्योंकि आप एक सामान्य समाधान चाहते हैं जो इसके लिए मैन्युअल रूप से कोडिंग spanऔर सीएसएस को शामिल नहीं करता है।
— विस्कॉन्सिन
17

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

<input [style.width.ch]="value.length" [(ngModel)]="value" />

यह स्वचालित रूप से जानी के जवाब में चरित्र इकाइयों के माध्यम से अद्यतन करता है ।

— क्रिस वांडेवेल्डे
स्रोत
3
यह। है। महाकाव्य।
— डैनियल फ्लिपेंस
गंभीरता से। जादुई।
— डोंगबिन किम
13

यह एक वैकल्पिक तरीका है, जो DIV और 'संतुष्ट' गुण का उपयोग करके इसे हल कर सकता है:

HTML:

<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>

CSS: (DIV को कुछ आयाम देने और देखने में आसान बनाने के लिए)

.fluidInput {

    display         : inline-block;
    vertical-align  : top;

    min-width       : 1em;
    height          : 1.5em;

    font-family     : Arial, Helvetica, sans-serif;
    font-size       : 0.8em;
    line-height     : 1.5em;

    padding         : 0px 2px 0px 2px;
    border          : 1px solid #aaa;
    cursor          : text;
}


.fluidInput * {

    display         : inline;

}


.fluidInput br  {

    display         : none;

}


.fluidInput:empty:before {

    content         : attr(data-placeholder);
    color           : #ccc;

}

नोट: यदि आप इसे एक FORM तत्व के अंदर उपयोग करने की योजना बना रहे हैं जिसे आप प्रस्तुत करना चाहते हैं, तो आपको सबमिट ईवेंट को पकड़ने के लिए जावास्क्रिप्ट / jQuery का उपयोग करना होगा ताकि आप DIV के 'मान' ( .innerHTMLया .html()क्रमशः) को पार्स कर सकें ।

— logic8
स्रोत
1
यह अधिक उत्थान के योग्य है। यह सुरुचिपूर्ण और सरल है (जब तक फॉर्म सत्यापन के लिए JS का उपयोग करना आपके लिए कोई समस्या नहीं है)।
— डैनियल बॉननेल
3
लेकिन यह एक इनपुट नहीं है!
— टोनी मिशेल क्यूबेट
8

आप आकार विशेषता के साथ ही इनपुट की चौड़ाई निर्धारित कर सकते हैं । एक इनपुट का आकार निर्धारित करता है कि यह वर्णों में चौड़ाई है।

एक इनपुट गतिशील रूप से समायोजित कर सकता है यह महत्वपूर्ण घटनाओं के लिए सुनकर आकार है।

उदाहरण के लिए

$("input[type='text']").bind('keyup', function () {
    $(this).attr("size", $(this).val().length );
});

JsFiddle यहाँ

— ब्रेंडन
स्रोत
7

आप की तरह कुछ कर सकता है यह

// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

​

​

— संबंध
स्रोत
यदि आप कीप पर आकार बढ़ाते हैं तो यह एक बदसूरत व्यवहार का परिणाम देगा। अधिक आराम के लिए चरित्र में आने से पहले इनपुट को अपना आकार बढ़ाने की आवश्यकता है।
— Lyth
5

बस अन्य उत्तरों के शीर्ष पर जोड़ना।

मैंने देखा कि आजकल कुछ ब्राउज़रों में इनपुट फ़ील्ड में एक स्क्रॉल है। जिसका मतलब है:

this.style.width = this.scrollWidth + 'px';

अच्छी तरह से काम करना चाहिए। क्रोम, फ़ायरफ़ॉक्स और सफारी में परीक्षण किया गया।

विलोपन सहायता के लिए, आप पहले '= 0' जोड़ सकते हैं और फिर रीड अन्याय कर सकते हैं। 

this.style.width = 0; this.style.width = this.scrollWidth + 'px';
— आदमी मोगरीबी
स्रोत
3
कृपया प्रासंगिक कोड यहां भी जोड़ें - लिंक भविष्य में मृत हो सकता है और फिर यह पोस्ट बेकार है।
— ऊऊओ जूल
3
यह महान काम करता है, धन्यवाद! मुझे नहीं पता कि इस उत्तर में अधिक उत्थान क्यों नहीं है। यह अब तक का सबसे सरल, कम विवादित (js) समाधान है।
— फॉर्म
4

यहाँ एक सादा जेएस और एक jQuery प्लगइन है जो मैंने लिखा था कि एक कैनवास और फ़ॉन्ट आकार / परिवार का उपयोग करके इनपुट तत्व का आकार बदलना होगा जब वास्तविक स्ट्रिंग की लंबाई निर्धारित की जाएगी। (केवल IE9, क्रोम, सफारी, फ़ायरफ़ॉक्स, ओपेरा और अधिकांश अन्य प्रमुख ब्राउज़रों में काम करता है जिन्होंने कैनवास तत्व को लागू किया है)।

PlainJS:

function autoSize(input, o) {
    o || (o = {});
    o.on || (o.on = 'keyup');

    var canvas = document.createElement('canvas');
    canvas.setAttribute('style', 'position: absolute; left: -9999px');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    input.addEventListener(o.on, function () {
        ctx.font = getComputedStyle(this,null).getPropertyValue('font');
        this.style.width = ctx.measureText(this.value + '  ').width + 'px';
    });
}

//Usage
autoSize(document.getElementById('my-input'));

jQuery प्लगइन:

$.fn.autoSize = function(o) {
  o = $.extend({}, {
    on: 'keyup'
  }, o);

  var $canvas = $('<canvas/>').css({position: 'absolute', left: -9999});
  $('body').append($canvas);

  var ctx = $canvas[0].getContext('2d');

  return this.on(o.on, function(){
    var $this = $(this);
    ctx.font = $this.css('font');
    $this.width(ctx.measureText($this.val()).width + 'px');
  })
}

//Usage:
$('#my-input').autoSize();

नोट: यह टेक्स्ट-ट्रांसफ़ॉर्म, लाइन स्पेसिंग और लेटर स्पेसिंग, और शायद कुछ अन्य टेक्स्ट साइज़ को बदलने वाले गुणों को हैंडल नहीं करेगा। टेक्स्ट-ट्रांसफ़ॉर्म प्रॉपर्टी को सेट करने के लिए और उस प्रॉपर्टी से मिलान करने के लिए टेक्स्ट वैल्यू को समायोजित करें। अन्य शायद काफी सीधे आगे हैं। मैं लागू करूँगा अगर यह कुछ कर्षण प्राप्त करना शुरू कर दे ...

— newms87
स्रोत
4

यह ध्यान देने योग्य है कि एक अच्छा दिखने वाला आकार तब किया जा सकता है जब फ़ॉन्ट मोनोसेप्ड हो, इसलिए हम inputउपयोग करने वाले तत्व का पूरी तरह से आकार बदल सकते हैंch इकाई ।

इसके अलावा इस दृष्टिकोण में हम सिर्फ एक को अपडेट करके क्षेत्र की चौड़ाई को अपडेट कर सकते सीएसएस चर ( कस्टम गुण पर) inputघटना है और हम भी पर पहले से ही पहले से भर इनपुट का ध्यान रखना चाहिए DOMContentLoadedघटना

कोडपेन डेमो

मार्कअप

<input type="text" value="space mono font" class="selfadapt" />

सीएसएस

:root { --size: 0; }

.selfadapt {
   padding: 5px;
   min-width: 10ch;
   font-family: "space mono";
   font-size: 1.5rem;
   width: calc(var(--size) * 1ch);
}

रूट वेरिएबल के रूप में हम सेट करते हैं --size: 0: इस वेरिएबल में इनपुट की लंबाई होगी और इसे एक्सप्रेशन के 1chअंदर गुणा किया जाएगा calc()। डिफ़ॉल्ट रूप से हम एक मिनट-चौड़ाई भी सेट कर सकते हैं, उदाहरण के लिए10ch

जावास्क्रिप्ट भाग सम्मिलित मान की लंबाई पढ़ता है और चर को अद्यतन करता है --size:

जे एस

let input = document.querySelector('.selfadapt');
let root  = document.documentElement.style;

/* on input event auto resize the field */
input.addEventListener('input', function() {
   root.setProperty('--size', this.value.length );
});

/* resize the field if it is pre-populated */
document.addEventListener("DOMContentLoaded", function() {
   root.setProperty('--size', input.value.length);
});

बेशक यह अभी भी काम करता है भले ही आप मोनोपोज़्ड फ़ॉन्ट का उपयोग न करें, लेकिन उस स्थिति में आपको चर को दूसरे मान calc()से गुणा करके --size(जो कि यह कड़ाई से निर्भर है font-familyऔर font-sizeअलग-अलग है) सूत्र को बदलने की आवश्यकता होगी 1ch।

— फबरीज़ियो काल्डेरन
स्रोत
3

यह उत्तर ब्राउज़र में उपलब्ध पाठ चौड़ाई को पुनः प्राप्त करने के सबसे सटीक तरीकों में से एक प्रदान करता है और स्वीकृत उत्तर की तुलना में अधिक सटीक है। यह कैनवास html5 तत्व का उपयोग करता है और अन्य उत्तरों के विपरीत तत्व को DOM में शामिल नहीं करता है और इस तरह DOM में तत्वों को जोड़ने के कारण होने वाले किसी भी reflow मुद्दों से बचा जाता है।

पाठ की चौड़ाई के संबंध में यहां कैनवास तत्व के बारे में और पढ़ें ।

नोट: MDN के अनुसार getPropertyValue()फॉन्ट जैसे विधि के शॉर्टहैंड संस्करण अविश्वसनीय हो सकते हैं। मैं संगतता को बेहतर बनाने के लिए एकवचन मान प्राप्त करने की सलाह दूंगा। मैंने केवल गति के लिए इसका उपयोग किया है।

/**
 * returns the width of child text of any DOM node as a float
 */
function getTextWidth(el) {
  // uses a cached canvas if available
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
  // get the full font style property
  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;
  // set the font attr for the canvas text
  context.font = font;
  var textMeasurement = context.measureText(text);
  return textMeasurement.width;
}

var input = document.getElementById('myInput');
// listen for any input on the input field
input.addEventListener('input', function(e) {
  var width = Math.floor(getTextWidth(e.target));
  // add 10 px to pad the input.
  var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}, false);
#myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
<input id="myInput" />
स्निपेट का विस्तार करें

— मैथ्यू ब्रेंट
स्रोत
2

बिल्ट-इन एनजी-स्टाइल निर्देश का उपयोग करके आप इसे कोणीय में भी सरल कर सकते हैं ।

अपने HTML में:

  <input ng-style="inputStyle(testdata)" ng-model="testdata" />

आपके नियंत्रक में:

 $scope.testdata = "whatever";

 $scope.inputStyle = function(str) {
    var charWidth = 7;
    return  {"width": (str.length +1) * charWidth + "px" };
    };

आपकी सीएसएस में:

input { font-family:monospace; font-size:12px; }

अपने फॉन्ट की चौड़ाई से मिलान करने के लिए charWidth को समायोजित करें। यह 12px के फ़ॉन्ट-आकार में 7 प्रतीत होता है;

— michieljoris
स्रोत
3
यह शांत और जानना आसान है, लेकिन एक इनपुट तत्व को गतिशील रूप से आकार देने के लिए ऐप में कोणीयज को जोड़ना वास्तव में गंभीर ओवरकिल है, खासकर जब ओपी ने "एचटीएमएल, जावास्क्रिप्ट, पीएचपी या सीएसएस" समाधानों के लिए कहा। कोई यह तर्क दे सकता है कि jQuery इसके लिए बहुत अधिक है, लेकिन - कोणीय के विपरीत - DOM- हेरफेर टूलकिट होना jQuery के उद्देश्य के लिए मुख्य है।
— vlasits
मुझे कैसे पता चलेगा कि चरित्र की चौड़ाई टाइप की जा रही है? यह मान लेना आसान नहीं है कि यह एक मोनो-आकार का फ़ॉन्ट है।
— एथन
1
आपको एक मोनोसैप्ड फ़ॉन्ट की आवश्यकता नहीं हो सकती है, और एंगुलर की कोई आवश्यकता नहीं है। ब्रेंडन का जवाब मूल रूप से एक ही है।
— डान डस्केलस्क्यू
2

यदि आप बूटस्ट्रैप का उपयोग करते हैं, तो यह बहुत आसानी से किया जा सकता है:

<div contenteditable="true" class="form-control" style="display: inline"></div>

आपको फॉर्म सबमिट करने से पहले बस div की सामग्री प्राप्त करनी होगी और इसे एक छिपे हुए इनपुट में डालना होगा।

— एलेक्सी कोसोव
स्रोत
1

मुझे लगता है कि आप गलत समझ रहे हैं min-width CSS प्रॉपर्टी की हैं । न्यूनतम-चौड़ाई का उपयोग आमतौर पर द्रव लेआउट में न्यूनतम DOM चौड़ाई को परिभाषित करने के लिए किया जाता है, जैसे:

input {
  width: 30%;
  min-width: 200px;
}

यह इनपुट तत्व को 200 पिक्सेल की न्यूनतम चौड़ाई पर सेट करेगा। इस संदर्भ में, "पिक्सेल" का अर्थ "पिक्सेल" है।

अब, यदि आप यह सुनिश्चित करने के लिए जांच करने का प्रयास कर रहे हैं कि इनपुट फ़ील्ड में कम से कम एक वर्ण है जब कोई उपयोगकर्ता इसे सबमिट करता है, तो आपको जावास्क्रिप्ट और PHP के साथ कुछ फ़ॉर्म सत्यापन करने की आवश्यकता होगी। यदि वास्तव में आप ऐसा करने का प्रयास कर रहे हैं, तो मैं इस उत्तर को संपादित करूंगा और आपकी मदद करने की पूरी कोशिश करूंगा।

— peterjmag
स्रोत
मुझे पता है कि px का क्या मतलब है और मुझे पता है कि जावास्क्रिप्ट का min-चौड़ाई के लिए एक फ़ंक्शन है, लेकिन यह इनपुट टेक्स्ट के लिए काम नहीं कर रहा है।
— 23
1
@ केर: "जावास्क्रिप्ट में मिनट-चौड़ाई के लिए एक फ़ंक्शन है" - कौन सा? आपका क्या अर्थ है? - "यह काम नहीं कर रहा है" एक समस्या का अच्छा वर्णन नहीं है। इच्छित व्यवहार के बारे में विस्तार से बताने की कोशिश करें।
— मार्सेल कोर्पेल
क्या आपने मेरा उदाहरण भी आजमाया, जैसा कि आप देखते हैं कि यह 1 px नहीं है और आपका भी नहीं है। अगर मैं इसे html, css
— Kerc
शायद इसके लिए एक php फ़ंक्शन है, कोई भी जानता है?
— कर्क
मैंने आपके उदाहरण की कोशिश की, लेकिन मैंने मान लिया कि 1 पिक्सेल चौड़ा इनपुट फ़ील्ड वह नहीं था जो आप खोज रहे थे। यदि यह है, तो कोशिश करें<input type="text" value="1" style="width:1px;" />
— peterjmag
1

मुझे वास्तव में Lyth का उत्तर पसंद आया , लेकिन वास्तव में यह भी चाहता था:

  1. बैकस्पेस संभालें और हटाएं
  2. आपको मैन्युअल रूप से एक आसन्न टैग जोड़ने की आवश्यकता नहीं है।
  3. न्यूनतम चौड़ाई लागू करें।
  4. स्वचालित रूप से एक विशिष्ट वर्ग वाले तत्वों पर लागू किया जाता है

मैं उसकी JSFiddle अनुकूलित और के साथ आया था इस । इस फिडेल में मौजूद एक भी सुधार jQuery CSS Parser की तरह कुछ का उपयोग करने के लिए नहीं होगा फिडेल वास्तव में input.textbox-autosize नियम से प्रारंभिक चौड़ाई को पढ़ने के लिए, और minWidth के रूप में उपयोग करें। ठीक है, मैं बस एक विशेषता का उपयोग कर रहा हूं, जो एक कॉम्पैक्ट डेमो के लिए बनाता है, लेकिन आदर्श नहीं है। के रूप में यह प्रत्येक इनपुट पर एक अतिरिक्त विशेषता की आवश्यकता है। तुम भी जावास्क्रिप्ट में 100 अधिकार के रूप में minWidth डाल करना चाहते हो सकता है।

HTML:

<div id='applicationHost'>
<div>Name:   <input class='textbox-autosize' data-min-width='100' type="text" /></div>
<div>Email:  <input class='textbox-autosize' data-min-width='100' type="email" /></div>
<div>Points: <input class='textbox-autosize' data-min-width='100' type="number" /></div>
</div>

सीएसएस:

#applicationHost {
    font-family: courier;
    white-space: pre;
}

input.textbox-autosize, span.invisible-autosize-helper {
    padding:0;
    font-size:12px;
    font-family:Sans-serif; 
    white-space:pre;
}
input.textbox-autosize {
    width: 100px; /* Initial width of textboxes */
}

/*
In order for the measurements to work out, your input and the invisible
span need to have the same styling.
*/

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

$('#applicationHost').on('keyup', '.textbox-autosize', function(e) {
    // Add an arbitary buffer of 15 pixels.
    var whitespaceBuffer = 15;
    var je = $(this);
    var minWidth = parseInt(je.attr('data-min-width'));
    var newVal = je.val();
    var sizingSpanClass = 'invisible-autosize-helper';
    var $span = je.siblings('span.' + sizingSpanClass).first();
    // If this element hasn't been created yet, we'll create it now.
    if ($span.length === 0) {
        $span = $('<span/>', {
            'class': sizingSpanClass,
            'style': 'display: none;'
        });
        je.parent().append($span);
    }
    $span = je.siblings('span').first();
    $span.text(newVal) ; // the hidden span takes 
    // the value of the input
    $inputSize = $span.width();
    $inputSize += whitespaceBuffer;
    if($inputSize > minWidth)
        je.css("width", $inputSize) ; // apply width of the span to the input
    else
        je.css("width", minWidth) ; // Ensure we're at the min width
});
— जोश
स्रोत
1

बेहतर है onvalue:

<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">

इसमें चिपकाना, घसीटना और गिराना आदि शामिल हैं।

— Łukasz Polowczyk
स्रोत
1

यहाँ मेरा 2 सेंट है। एक खाली अदृश्य div बनाएँ। इसे इनपुट सामग्री के साथ भरें और इनपुट फ़ील्ड में चौड़ाई वापस करें। प्रत्येक बॉक्स के बीच पाठ शैलियों का मिलान करें।

$(".answers_number").keyup(function(){
    $( "#number_box" ).html( $( this ).val() );
    $( this ).animate({
        width: $( "#number_box" ).width()+20
        }, 300, function() {
    });
});
#number_box {
   position: absolute;
   visibility: hidden;
   height: auto;
   width: auto;
   white-space: nowrap;
   padding:0 4px;
   /*Your font styles to match input*/
   font-family:Arial;
   font-size: 30px; 
}
    
.answers_number {
   font-size: 30px; 
   font-family:Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="answers_number" />
<div id="number_box">
</div>
स्निपेट का विस्तार करें

— थॉमस बाय
स्रोत
1

काफी सरल:

oninput='this.style.width = (this.scrollWidth - N) + "px";'

जहाँ N कुछ संख्या है (उदाहरण में 2, कुछ मैं विकसित कर रहा हूँ पर 17) जो प्रयोगात्मक रूप से निर्धारित की जाती है।

पाठ बॉक्स के अंत तक पाठ पहुंचने से बहुत पहले एन को घटाना इस अजीब बाहरी जगह को जमा होने से रोकता है।

की तुलना करें। केवल पहले चरित्र के बाद भी आकार कैसे बदलता है, इस पर ध्यान दें । 

<p>Subtracting N:</p>    
<input type="text" placeholder="enter lots of text here" oninput='this.style.width = (this.scrollWidth-2) + "px";'>

<p>Not Subtracting N:</p>    
<input type="text" placeholder="enter lots of text here" oninput='this.style.width = (this.scrollWidth) + "px";'>
स्निपेट का विस्तार करें

— दान टी
स्रोत
मैं बड़े पैमाने पर इस के साथ परीक्षण नहीं किया है, लेकिन तुम सिर्फ बदल सकता oninput='this.style.width = (this.scrollWidth-2) + "px";'द्वारा oninput='this.style.width = 0; this.style.width = this.scrollWidth + "px";'अंतरिक्ष एकत्रित कर पाने में छुटकारा पाने के लिए
— MaxCloutier
0

मैं अभी कुछ समय बिताता हूं कि यह कैसे करना है।
वास्तव में मुझे जो सबसे सरल तरीका मिला वह है इनपुट से पहले इनपुट वैल्यू को स्थानांतरित करना, इनपुट 1 सिंबल की चौड़ाई को बनाए रखना। हालाँकि मुझे यकीन नहीं हो रहा है कि यह आपकी शुरुआती ज़रूरत के लिए फिट है।
शायद यह कुछ अतिरिक्त कोड है, लेकिन प्रतिक्रिया + फ्लक्स आधारित अनुप्रयोग में यह काफी प्राकृतिक समाधान है।

— freele
स्रोत
0

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

मैं यहाँ पर ज्यादातर लोगों को इनपुट टेक्स्ट लिखने के लिए स्पैन का उपयोग करके चौड़ाई प्राप्त करने का काम कर रहा हूँ। तब मैं चौड़ाई सेट कर रहा हूँ जब क्रियाएँ keyupऔरblur कहा जाता है।

यहाँ एक काम कोडपेन है । इस कोडपेन से पता चलता है कि इसका उपयोग कई इनपुट फ़ील्ड के साथ कैसे किया जा सकता है।

HTML संरचना:

<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>

jQuery:

function resizeInputs($text) {
    var text = $text.val().replace(/\s+/g, ' '),
        placeholder = $text.attr('placeholder'),
        span = $text.next('span');
        span.text(placeholder);
    var width = span.width();

    if(text !== '') {
        span.text(text);
    var width = span.width();
    }

    $text.css('width', width + 5);
};

उपरोक्त फ़ंक्शन इनपुट मान प्राप्त करता है, अतिरिक्त रिक्त स्थान को ट्रिम करता है और चौड़ाई प्राप्त करने के लिए टेक्स्ट को स्पैन में सेट करता है। यदि कोई पाठ नहीं है, तो यह प्लेसहोल्डर प्राप्त करता है और इसके बजाय स्पैन में प्रवेश करता है। एक बार जब यह पाठ को स्पैन में प्रवेश करता है तो इनपुट की चौड़ाई निर्धारित करता है। + 5चौड़ाई पर क्योंकि बिना कि इनपुट एज ब्राउज़र में एक छोटा सा काट हो जाता है।

$('.plain-field').each(function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('keyup blur', function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('blur', function() {
    var $text = $(this).val().replace(/\s+/g, ' ');
    $(this).val($text);
});

अगर इसमें सुधार किया जा सकता है तो कृपया मुझे बताएं क्योंकि यह सबसे साफ समाधान है जिसके साथ मैं आ सकता हूं।

— मैथ्यू
स्रोत
0

सिर्फ सीएसएस का उपयोग क्यों नहीं? 

<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

function keyup(e) {
	document.getElementById('ghost').innerText = e.target.value;
}
#wrapper {
  position: relative;
  min-width: 30px;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  border:1px solid blue;
  width: 100%;
}

#ghost {
  color: transparent;
}
<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>
स्निपेट का विस्तार करें

wrapper {
  position: relative;
  min-width: 30px;
  border: 1px solid red;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  width: 100%;
}

#ghost {
  color: transparent;
}

यह कोड @Iain टोड द्वारा पेश किया गया था और मुझे लगा कि मुझे इसे साझा करना चाहिए

— मिलाद
स्रोत
यह सिर्फ सीएसएस नहीं है। यह सिर्फ एक और js विधि है। दिलचस्प एक।
— vatavale
0

एक बुलेट प्रूफ, सामान्य तरीका है:

  1. ध्यान में रखना हर संभव मापा की शैलियों inputतत्व
  2. HTML को संशोधित किए बिना किसी भी इनपुट पर माप लागू करने में सक्षम हो या

कोडपेन डेमो

var getInputValueWidth = (function(){
  // https://stackoverflow.com/a/49982135/104380
  function copyNodeStyle(sourceNode, targetNode) {
    var computedStyle = window.getComputedStyle(sourceNode);
    Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key)))
  }
  
  function createInputMeassureElm( inputelm ){
    // create a dummy input element for measurements
    var meassureElm = document.createElement('span');
    // copy the read input's styles to the dummy input
    copyNodeStyle(inputelm, meassureElm);
    
    // set hard-coded styles needed for propper meassuring 
    meassureElm.style.width = 'auto';
    meassureElm.style.position = 'absolute';
    meassureElm.style.left = '-9999px';
    meassureElm.style.top = '-9999px';
    meassureElm.style.whiteSpace = 'pre';
    
    meassureElm.textContent = inputelm.value || '';
    
    // add the meassure element to the body
    document.body.appendChild(meassureElm);
    
    return meassureElm;
  }
  
  return function(){
    return createInputMeassureElm(this).offsetWidth;
  }
})();


// delegated event binding
document.body.addEventListener('input', onInputDelegate)

function onInputDelegate(e){
  if( e.target.classList.contains('autoSize') )
    e.target.style.width = getInputValueWidth.call(e.target) + 'px';
}
input{ 
  font-size:1.3em; 
  padding:5px; 
  margin-bottom: 1em;
}

input.type2{
  font-size: 2.5em;
  letter-spacing: 4px;
  font-style: italic;
}
<input class='autoSize' value="type something">
<br>
<input class='autoSize type2' value="here too">
स्निपेट का विस्तार करें

— vsync
स्रोत
0

आप बस sizeविशेषता सेट कर सकते हैं । यदि आप प्रतिक्रियाशील चौखटे में से एक का उपयोग कर रहे हैं, तो निम्नलिखित पर्याप्त होंगे:

<input size="{{ yourValue.length }}" [value]="yourValue" />

लेकिन अगर आप शुद्ध js का उपयोग कर रहे हैं, तो आपको ईवेंट हैंडलर सेट करना चाहिए, जैसे:

<input oninput="this.setAttribute('size', this.value.length)" />
— akim lyubchenko
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.