এর ইনপুট ক্ষেত্রে ইনপুট ক্ষেত্রের প্রস্থ সামঞ্জস্য করুন

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

এটি আমার কোড এবং এটি কাজ করছে না। এইচটিএমএল, জাভাস্ক্রিপ্ট, পিএইচপি বা সিএসএসে ন্যূনতম প্রস্থ নির্ধারণের জন্য অন্য কোনও উপায় আছে কি?

আমি একটি পরিবর্তনশীল প্রস্থের প্রস্থ সহ একটি পাঠ্য ইনপুট ক্ষেত্র চাই, যাতে ইনপুট ক্ষেত্রটি এর সামগ্রীর চারপাশে তরল থাকে। প্রতিটি ইনপুটটির অন্তর্নির্মিত প্যাডিং থাকে 2em, এটাই সমস্যা এবং দ্বিতীয় সমস্যাটি হ'ল min-widthইনপুটটিতে মোটেই কাজ করছে না।

আমি যদি পুরো প্রোগ্রামটির চেয়ে প্রস্থের প্রয়োজনের চেয়ে বেশি নির্ধারণ করি তবে অগোছালো, আমার 1px প্রস্থ প্রয়োজন, কেবল এটির প্রয়োজন হলেই।

javascript  html  css 
— Kerc
সূত্র
এটা কি তোমার প্রশ্নের উত্তর? অটো-
— রাইজাইয়ে একটি টেক্সটরিয়া

উত্তর:

96

মনে হচ্ছে আপনার প্রত্যাশাটি হ'ল পাঠ্যবক্সের সামগ্রীর উপর ভিত্তি করে শৈলীটি পাঠ্যবক্সের প্রস্থে গতিশীলভাবে প্রয়োগ করা হবে। যদি তাই হয় আপনি পরিবর্তন, ভালো কিছু পাঠ্যবাক্স বিষয়বস্তু চালানোর কিছু JS প্রয়োজন হবে এই :

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

দ্রষ্টব্য: এই সমাধানটি কেবল তখনই কাজ করে যখন প্রতিটি অক্ষর হুবহু 8pxপ্রশস্ত হয়।

— Tahbaza
সূত্র
41
@ কেরাক এবং তাহবাজা: হ্যাঁ, তবে এটি কেবল তখনই কাজ করবে যদি প্রতিটি চরিত্রের প্রস্থ হুবহু ৮ পিক্সেল হয়।
— মার্সেল করপেল
6
আমি সম্মত হই, মার্সেল (এবং পোস্ট কোড এমন কিছু নয় যা আমি সত্যিই ব্যবহার দেখতে পাচ্ছি) তবে এটি পছন্দসই আচরণ প্রদর্শন করে। আপনি কীভাবে অ্যাকাউন্টের ফন্ট, আকার, ওজন, কার্নিং ইত্যাদি গ্রহণ করে রেন্ডার করা পাঠ্যের প্রকৃত প্রস্থ গণনা করবেন? যদি তা হয় তবে দয়া করে শেয়ার করুন কারণ আমি এই বিট কোডটি উপলক্ষ্যে দরকারী find
— তাহবাজা
1
- আমি ইতিমধ্যে ভেবেছিলাম এটি একটি উদাহরণ মাত্র। যদিও ইনপুটটির প্রস্থ গণনা করা এতটা কঠিন নয়। আমার উত্তর দেখুন।
— মার্সেল করপেল
em ইউনিটগুলি "m" অক্ষরের প্রস্থ। এটি স্ট্রিংয়ের প্রস্থ গণনা করার জন্য দরকারী be আমি ইম ইউনিটগুলির সাথে ক্রস-ব্রাউজার সমস্যাগুলি দেখেছি কিছু বৈশিষ্ট্যের ক্ষেত্রে এটি প্রয়োগ করা হলেও এটি পরীক্ষা করে।
— আর্কোনিক
7
আপনি আমার বন্ধুকে পাসের ইভেন্টটি ভুলে গিয়েছেন ;) আপনার এটিকে পরিবর্তন করা উচিত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ইত্যাদি। আমি উত্তরটি একটি লাইভ ডেমো দিয়ে সম্পাদনা করেছি।
— vsync
5
আপনি যদি মনসোপাসে ফন্ট ব্যবহার করেন তবে দুর্দান্ত কাজ করে। অন্যান্য ফন্টের সাথে আপনার মাইলেজ পরিবর্তিত হতে পারে কারণ এটি 0 বর্ণের অক্ষরের প্রস্থটি আপাতভাবে ব্যবহার করে।
— জিলিস ভ্যান গর্প
2
এটি সত্যিই দুর্দান্ত। যদিও নোট করুন যে এটি কখনও কখনও বের হয়ে যায় / যখন আমার .মুখোমুখি হয়েছিল তখন আমার প্রত্যাশা মতো কাজ করে না ।
— isষভ
1
আপনি যদি ইনপুটটিতে বাক্স-আকার পরিবর্তনকে 'সামগ্রী-বাক্সে' সেট করেন তবে এটি পুরোপুরি কাজ করে। আপনি আকার নির্ধারণ করার সময় এইভাবে প্যাডিং উপেক্ষা করে।
— হাইপারসপিয়েন
65

বর্তমান ইনপুটটির প্রস্থ গণনা করতে, আপনাকে এটিকে একটি অস্থায়ী spanউপাদানটিতে এম্বেড করতে হবে , সেই জিনিসটি ডিওএমের সাথে সংযুক্ত করতে হবে, scrollWidthসম্পত্তিটি ব্যবহার করে গণিত প্রস্থ (পিক্সেলগুলিতে) পেতে হবে এবং spanআবার সরিয়ে ফেলতে হবে । অবশ্যই আপনাকে নিশ্চিত করতে হবে যে একই ফন্টের পরিবার, ফন্টের আকার, ইত্যাদি উপাদান inputহিসাবে পাশাপাশি ব্যবহৃত হয় span। তাই আমি তাদের জন্য একই ক্লাস নিযুক্ত করেছি।

আমি keyupইভেন্টটির সাথে ফাংশনটি সংযুক্ত করেছি , keypressইনপুট চরিত্রের মতো ইনপুটটিতে এখনও যোগ করা হয়নি value, যাতে ভুল প্রস্থের ফলাফল হয়। দুর্ভাগ্যক্রমে, আমি কীভাবে ইনপুট ক্ষেত্রের স্ক্রোলিং থেকে মুক্তি পেতে পারি না (ক্ষেত্রের শেষে অক্ষর যুক্ত করার সময়); এটি স্ক্রল করে, কারণ চরিত্রটি যুক্ত করা হয় এবং তার আগে দেখানো adjustWidthOfInput()হয়। এবং যেমনটি বলা হয়েছে, আমি এটি অন্য উপায়ে করতে পারি না কারণ চাপা অক্ষর সন্নিবেশ করার আগে আপনার কাছে ইনপুট ক্ষেত্রের মান হবে । আমি এই সমস্যাটি পরে সমাধান করার চেষ্টা করব।

বিটিডাব্লু, আমি এটি কেবল ফায়ারফক্সে পরীক্ষা করেছি (৩. tested.৮) তবে আপনি পয়েন্টটি পাবেন, আশা করি।

<!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 / অ্যান্ডস্কোর : gist.github.com/3745941 ব্যবহার করে প্রয়োগ করেছি । তবে, আমি কিছু অনুমান করতে পারি: (1) যে কোনও অক্ষরের প্রস্থ 14px এর বেশি নয়, (2) ইনপুট উপাদানটির উপাদানটির মান 14px প্রসারিত হওয়া গ্রহণযোগ্য। আমি এটি একটি কীডাউন ইভেন্টের সাথে সংযুক্ত করেছি এবং এটি দুর্দান্ত কাজ করছে!
— নাথান
11
আপনি যোগ করা উচিত white-space: pre;CSS মধ্যে এই ভাবে: .tmp-element{ visibility: hidden; white-space: pre;}। অন্যথায় সাদা স্পেসগুলি একত্রিত হয় এবং প্রস্থের গণনা ব্যর্থ হয়। <input>এবং <span>হোয়াইট স্পেস হ্যান্ডলিং সম্পর্কিত বিভিন্নভাবে আচরণ করে, <input>সাদা স্থানগুলি ধরে রাখে এবং <span>যদি white-space: pre;যোগ না করা হয় তবে ক্রমিক সাদা স্থানগুলিকে একের সাথে সংযুক্ত করে।
— টিমো কাহকেনেন
2
tmp.getBoundingClientRect().widthএর চেয়ে ভাল tmp.scrollWidth, কারণ যে কখনও কখনও 0
— লিসাক
@ লিসাক ধন্যবাদ, আমি আমার উত্তরটি সামঞ্জস্য করেছি, তবে এখানে ইতিমধ্যে আরও ভাল উত্তর রয়েছে।
— মার্সেল করপেল
উত্তম? আমি তাই বলব না। চিহ্নিত উত্তরে যথাযথতার অভাব রয়েছে, অন্যরা (+ এখানে 1 এবং এখানে 2 ) jQuery ব্যবহার করে - আমি প্রতিক্রিয়া দেখানোর কারণে করি না। ক্যানভাস আপনাকে পাঠ্য উচ্চতা AFAIK দিতে পারে না। আইডিয়া: স্পেসগুলির সাথে ইস্যুটিও এর সাথে সমাধান করা যেতে পারে:.replace(/ /g, "&nbsp;")
— মিলান জারোস
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;
}

এইচটিএমএল:

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

কোড স্নিপেট দেখান

— মাইকেল
সূত্র
হাই @ মিশেল আপনার কোড দুর্দান্ত কাজ করে তবে আমার একটি সমস্যা আছে। আমার ক্ষেত্রগুলির মধ্যে একটি হ'ল গুগল প্লেস অটোকম্প্লেট ফিল্ড। এবং যখন আমি একটি ডাউন ডাউন মেনু থেকে সঠিক ঠিকানাটি বাছাই করি, তখন নির্বাচিত ঠিকানার দৈর্ঘ্য অনুসারে ইনপুট ক্ষেত্রের প্রস্থ পরিবর্তন হয় না। এটির জন্য কি কোনও সাধারণ ফিক্স আছে?
— ম্যাক্সেন্স
2
@ ম্যাক্সেন্সটি changeবা inputইভেন্টটি শুনে যথেষ্ট হবে
— ইয়ারওয়েস্ট
স্প্যানটির প্রদর্শন নিয়ে আমার সমস্যা ছিল: স্টাইলের কোনও কারণই স্প্যানটি এটি 0 প্রস্থ হিসাবে নিবন্ধীকৃত হয়নি। দৃশ্যমানতার সাথে নিখুঁত অবস্থান ব্যবহার করা আরও ভাল: স্প্যানের জন্য লুকানো।
— জয়ট
হাই ইয়ার ওয়েস্ট, টিপটির জন্য ধন্যবাদ। কোনও সুযোগে আপনি কীভাবে জানবেন কীভাবে এই সেটআপটি দিয়ে মূল স্ক্রিপ্টটি টুইট করতে? (জেএস / জ্যাকিউরিতে আমার জ্ঞানটি খুব সীমাবদ্ধ)
— ম্যাক্সেন্স
21

এখানে একটি সমাধান পাওয়া যাবে মোনোস্কেপ ফন্ট ছাড়া , প্রয়োজনীয় জাভাস্ক্রিপ্ট শুধুমাত্র খুব ছোট টুকরা কোড সহ , নির্ণিত শৈলী নিরূপণ করব না প্রয়োজন , এবং, এমনকি IME সমর্থন , সমর্থন RTL গ্রন্থে ।

// 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

একটি ভাল চেহারা এবং অনুভব জন্য

চাপযুক্ত চরিত্রটি পেতে আপনার স্ট্রিং.ফ্রোমচোড়কোড (যেমন।) এর সাথে সম্মিলিতভাবে jQuery কী-চাপ () ইভেন্টটি ব্যবহার করা উচিত। সুতরাং আপনার প্রস্থ কত হবে তা আপনি গণনা করতে পারেন । কেন? কারণ এটি দেখতে অনেক বেশি সেক্সি লাগবে :)

কীপ ইভেন্টটি সমাধানের সাথে তুলনা করে তুলনামূলক সুন্দর আচরণের ফলাফলের জন্য এখানে একটি জাসফিডাল দেওয়া হয়েছে: 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
দেখতে দেখতে দুর্দান্ত, তবে এটি ব্যাকস্পেস এবং মুছুনটিকে অ্যাকাউন্টে নেয় না।
— মার্সেল করপেল
হ্যাঁ, এর জন্য আপনার কীডাউন ইভেন্ট দরকার। আপনি ব্যাকস্পেসের জন্য নির্দিষ্ট হ্যান্ডলিং যুক্ত করতে পারেন এবং এটি করে মুছে ফেলতে পারেন (যেমন মুছার জন্য মুছে ফেলার জন্য, যেমন, ব্যাকস্পেসের জন্য === 8) delete তবে আপনার বাকি কিছুর জন্য e.charCode এ অ্যাক্সেস পাওয়ার জন্য কীপ্রেস ইভেন্টটি এখনও দরকার।
— লিথ
আপনি যদি আইই 8 কে সমর্থন করছেন না তবে আপনি অন-ইনপুট ইভেন্টটি ব্যবহার করে পরীক্ষা করতে পারবেন ই: যা
— ইউএস
1
আমি আপনার উত্তরটি jQuery নির্মূল করতে এবং কেবল ভ্যানিলা জেএস ব্যবহার করতে সম্পাদনা করেছি। মনে রাখবেন যে সমাধানটি সর্বোত্তম থেকে দূরে কারণ আপনি একটি জেনেরিক সমাধান চান যা এটির জন্য ম্যানুয়ালি কোডিং spanএবং সিএসএসের সাথে জড়িত না ।
— vsync
17

এটি একটি কৌণিক-নির্দিষ্ট উত্তর, তবে এটি আমার পক্ষে কাজ করেছে এবং এর সরলতা এবং সহজেই ব্যবহারের দিক থেকে এটি অত্যন্ত সন্তোষজনক হয়েছে:

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

এটি জানির উত্তরের অক্ষর ইউনিটগুলির মাধ্যমে স্বয়ংক্রিয়ভাবে আপডেট হয় ।

— ক্রিস ভ্যান্ডভেল্ডে
সূত্র
3
এই. হয়। এপিক।
— ড্যানিয়েল ফ্লিপান্স
সিরিয়াসলি। জাদু।
— দংবিন কিম
13

ডিআইভি এবং 'সন্তোষজনক' সম্পত্তি ব্যবহার করে এটি সমাধানের বিকল্প উপায় এখানে রয়েছে:

এইচটিএমএল:

<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></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;

}

দ্রষ্টব্য: আপনি যে ফর্ম উপাদানটি জমা দেওয়ার পরিকল্পনা করছেন তার অভ্যন্তরে এটি ব্যবহার করার পরিকল্পনা করা হলে, জমা দেওয়া ইভেন্টটি ধরার জন্য আপনাকে জাভাস্ক্রিপ্ট / jQuery ব্যবহার করতে হবে যাতে আপনি ডিআইভির 'মান' ( .innerHTMLবা .html()যথাক্রমে) পার্স করতে পারেন ।

— logic8
সূত্র
1
এটি আরও উন্নয়নের দাবিদার। এটি মার্জিত এবং সহজ (যতক্ষণ না ফর্ম বৈধতার জন্য জেএস ব্যবহার করা আপনার পক্ষে সমস্যা নয়)।
— ড্যানিয়েল বোনেল
3
তবে এটি কোনও ইনপুট নয়!
— টনি মিশেল কাবেট
8

আপনি আকারের বৈশিষ্ট্যটিও ব্যবহার করে একটি ইনপুট প্রস্থ সেট করতে পারেন । একটি ইনপুট আকার এটি অক্ষরের মধ্যে প্রস্থ নির্ধারণ করে।

কোনও ইনপুট মূল ইভেন্টগুলি শুনে তার আকারকে গতিশীলভাবে সামঞ্জস্য করতে পারে।

উদাহরণ স্বরূপ

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

জেএসফিডাল এখানে

— ব্রেন্ডন
সূত্র
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();
  });
});

​

​

— টাইস
সূত্র
আপনি কীআপে আকার বাড়িয়ে তুললে এটি কুৎসিত আচরণের ফলস্বরূপ। আরও স্বাচ্ছন্দ্যের জন্য চরিত্রটি আসার আগেই ইনপুটটির আকার বাড়ানো দরকার।
— লিথ
5

অন্যান্য উত্তরের উপরে কেবল যুক্ত করা।

আমি লক্ষ করেছি যে আজকাল কিছু ব্রাউজারগুলিতে ইনপুট ক্ষেত্রে একটি স্ক্রোলউইথ থাকে। যার অর্থ:

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

সুন্দরভাবে কাজ করা উচিত। ক্রোম, ফায়ারফক্স এবং সাফারি পরীক্ষিত।

মোছার সমর্থনের জন্য, আপনি প্রথমে '= 0' এবং তারপরে পুনরায় সমন্বয় করতে পারেন। 

this.style.width = 0; this.style.width = this.scrollWidth + 'px';
— লোক মোগ্রাবি
সূত্র
3
এখানেও প্রাসঙ্গিক কোড যুক্ত করুন - লিঙ্কটি ভবিষ্যতে মারা যেতে পারে এবং তারপরে এই পোস্টটি অকেজো।
— ইউও
3
এটি দুর্দান্ত কাজ করে, ধন্যবাদ! আমি জানি না কেন এই উত্তরটির আরও বেশি উত্স নেই। এটি এখন পর্যন্ত সবচেয়ে সহজ, কম স্বীকৃত (জেএস) সমাধান।
— ফর্ম
4

এখানে একটি সরল জেএস এবং একটি jQuery প্লাগইন রয়েছে যা রচনা করার সময় প্রকৃত স্ট্রিংয়ের দৈর্ঘ্য নির্ধারণ করতে ক্যানভাস এবং ফন্টের আকার / পরিবার ব্যবহার করে একটি ইনপুট উপাদানটির আকার পরিবর্তন করতে পারে handle (কেবলমাত্র আইই 9, ক্রোম, সাফারি, ফায়ারফক্স, অপেরা এবং ক্যানভাস উপাদানটি কার্যকর করেছে এমন বেশিরভাগ বড় ব্রাউজারগুলিতে কাজ করে)।

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);
});

অবশ্যই এটি এখনও কার্যকর হয় এমনকি যদি আপনি মনসপাসেড ফন্ট ব্যবহার না করেন তবে সেই ক্ষেত্রে আপনার পরিবর্তনের চেয়ে অন্য ভ্যারিয়েবলের (যা এটি দৃ strictly়ভাবে নির্ভর করে এবং ) এর চেয়ে আলাদা calc()দ্বারা সূত্র পরিবর্তন করতে হবে ।--sizefont-familyfont-size1ch

— ফ্যাবরিজিও ক্যালডেরান
সূত্র
3

এই উত্তরটি ব্রাউজারে উপলব্ধ পাঠ্যের প্রস্থ পুনরুদ্ধার করার সবচেয়ে সঠিক পদ্ধতির একটি সরবরাহ করে এবং গৃহীত উত্তরের চেয়ে আরও নির্ভুল। এটি ক্যানভাস এইচটিএমএল 5 উপাদান ব্যবহার করে এবং অন্যান্য উত্তরের পরিবর্তে ডিওমে উপাদান যুক্ত করে না এবং এটি অতিরিক্তভাবে ডিওমে উপাদান যুক্ত করার কারণে যে কোনও রিফ্লু সমস্যা এড়ায়।

পাঠ্যের প্রস্থের ক্ষেত্রে এখানে ক্যানভাস উপাদান সম্পর্কে আরও পড়ুন ।

দ্রষ্টব্য: এমডিএন অনুসারে 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

বিল্ট-ইন এনজি-স্টাইল নির্দেশিকা ব্যবহার করে আপনি এটি কৌণিক ভাষায় আরও সহজ করতে পারেন ।

আপনার এইচটিএমএলে:

  <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; }

আপনার ফন্টের প্রস্থের সাথে মেলে চার্ভিথ সামঞ্জস্য করুন। এটি 12px এর ফন্ট আকারে 7 বলে মনে হচ্ছে;

— michieljoris
সূত্র
3
এটি জানার জন্য দুর্দান্ত এবং সহজ, তবে একটি ইনপুল উপাদানকে পরিবর্তনশীল আকারে পরিবর্তন করতে কোনও অ্যাপ্লিকেশনে অ্যাঙ্গুলার যুক্ত করা অত্যন্ত গুরুতর ওভারকিল, বিশেষত যখন ওপি "এইচটিএমএল, জাভাস্ক্রিপ্ট, পিএইচপি বা সিএসএস" সমাধানের জন্য বলেছিলেন। কেউ তর্ক করতে পারে যে jQuery এর জন্য ওভারকিলও রয়েছে তবে - অ্যাঙ্গুলারের বিপরীতে - একটি ডম-ম্যানিপুলেশন টুলকিট হ'ল jQuery এর উদ্দেশ্য to
— 7:34
চরিত্রটি টাইপ করা হচ্ছে তার প্রস্থটি কীভাবে জানব? এটি একটি মনো-আকারের ফন্ট বলে ধরে নেওয়া সহজ নয়।
— এথান
1
আপনার কোনও মনসপাসড ফন্টের প্রয়োজন নেই, এবং কৌণিকের প্রয়োজন নেই। ব্রেন্ডনের উত্তরটি মূলত একই রকম হয়।
— ড্যান ড্যাসক্লেস্কু
2

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে এটি খুব সহজেই করা যেত:

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

ফর্মটি জমা দেওয়ার আগে আপনাকে কেবল ডিভের সামগ্রী আনতে হবে এবং একটি লুকানো ইনপুটতে লাগাতে হবে।

— আলেক্সি কোসভ
সূত্র
1

আমার মনে হয় আপনি অপব্যাখ্যা করছেন মিনিট-চওড়া সিএসএস সম্পত্তি । ন্যূনতম প্রস্থ সাধারণত তরল বিন্যাসে ন্যূনতম ডিওএম প্রস্থ নির্ধারণ করতে ব্যবহৃত হয়:

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

এটি ইনপুট উপাদানটিকে সর্বনিম্ন 200 পিক্সেলের প্রস্থে সেট করবে। এই প্রসঙ্গে, "px" বলতে "পিক্সেল" বোঝায়।

এখন, আপনি যদি কোনও ব্যবহারকারী এটি জমা দেয় তখন ইনপুট ফিল্ডটিতে কমপক্ষে একটি অক্ষর রয়েছে কিনা তা পরীক্ষা করে দেখার চেষ্টা করছেন , আপনাকে জাভাস্ক্রিপ্ট এবং পিএইচপি দিয়ে কিছু ফর্ম বৈধকরণ করতে হবে। যদি আপনি যা করার চেষ্টা করছেন তা যদি হয় তবে আমি এই উত্তরটি সম্পাদনা করব এবং আপনাকে সাহায্য করার জন্য যথাসাধ্য চেষ্টা করব।

— peterjmag
সূত্র
আমি জানি পিএক্স এর অর্থ কী এবং আমি জানি জাভাস্ক্রিপ্টের ন্যূনতম প্রস্থের জন্য একটি ফাংশন রয়েছে তবে এটি ইনপুট পাঠ্যের জন্য কাজ করছে না।
— কের্ক
1
@ কেরাক: "জাভাস্ক্রিপ্টের ন্যূনতম প্রস্থের জন্য একটি ফাংশন রয়েছে" - কোনটি? আপনি কি বোঝাতে চেয়েছেন? - "এটি কাজ করে না" কোনও সমস্যারই ভালো বর্ণনা কখনও নয়। উদ্দেশ্যমূলক আচরণটি বিশদ দেওয়ার চেষ্টা করুন।
— মার্সেল করপেল
আপনি কি আমার উদাহরণটি ব্যবহার করে দেখেছেন, আপনি দেখতে চেয়েছেন যে এটি 1 পিক্সেল নয় এবং আপনারও নয়। আমি এইচটিএমএল, সিএসএস এ লিখলে তা কার্যকর হবে না
— কার্ক
সম্ভবত এই জন্য একটি পিএইচপি ফাংশন আছে, কেউ জানেন?
— কের্ক
আমি আপনার উদাহরণটি চেষ্টা করেছিলাম, তবে আমি ধরে নিয়েছিলাম যে 1 পিক্সেল প্রশস্ত ইনপুট ক্ষেত্রটি আপনি যা খুঁজছিলেন তা নয়। যদি তা হয় তবে চেষ্টা করুন<input type="text" value="1" style="width:1px;" />
— পেটারজমগ
1

আমি লাইথের উত্তরটি সত্যিই পছন্দ করেছি , তবে সত্যই এটি চেয়েছিলাম:

  1. ব্যাকস্পেস হ্যান্ডেল করুন এবং মুছুন
  2. আপনাকে ম্যানুয়ালি একটি সংলগ্ন ট্যাগ যুক্ত করার প্রয়োজন নেই।
  3. একটি মিনিট প্রস্থ প্রয়োগ করুন।
  4. একটি নির্দিষ্ট বর্গ সহ উপাদানগুলিতে স্বয়ংক্রিয়ভাবে প্রয়োগ করা হবে

আমি তার JSFiddle অভিযোজিত এবং নিয়ে এসেছেন এই । এই ফিডলটিতে উপস্থিত না হওয়া একটি উন্নতি হ'ল ইনপুট.টেক্সটবক্স-অটোসাইজ নিয়ম থেকে প্রাথমিক প্রস্থটি পড়ার জন্য jQuery CSS পার্সারের মতো কিছু ব্যবহার করা এবং এটি মিনিট প্রস্থ হিসাবে ব্যবহার করা। ডান আমি কেবল একটি এট্রিবিউট ব্যবহার করছি, যা কমপ্যাক্ট ডেমো তৈরি করে তবে আদর্শ নয়। যেহেতু এটির প্রতিটি ইনপুটটিতে অতিরিক্ত বৈশিষ্ট্য প্রয়োজন। আপনি হয়ত জাভাস্ক্রিপ্টে মিনিউইথটি 100 হিসাবে ডানদিকে রাখতে চান।

এইচটিএমএল:

<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.
*/

javascript:

$('#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';">

এটিতে পেস্ট করা, টেনে আনতে এবং নামানো ইত্যাদি জড়িত ves

— Asukasz Polowczyk
সূত্র
1

এখানে আমার 2 সেন্ট। একটি খালি অদৃশ্য ডিভ তৈরি করুন। এটি ইনপুট সামগ্রী দিয়ে পূরণ করুন এবং প্রস্থটি ইনপুট ক্ষেত্রে ফিরিয়ে দিন। প্রতিটি বাক্সের মধ্যে পাঠ্য শৈলীর সাথে মেলে।

$(".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";'

যেখানে এন কিছু নম্বর (উদাহরণে 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 ডাকা হয় ।

এখানে একটি ওয়ার্কিং কোডেপেন । এই কোডেপেনটি দেখায় যে এটি একাধিক ইনপুট ক্ষেত্রগুলির সাথে কীভাবে ব্যবহার করা যেতে পারে।

এইচটিএমএল স্ট্রাকচার:

<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);
});

যদি এটির উন্নতি হতে পারে তবে দয়া করে আমাকে জানান কারণ এটিই আমার সবচেয়ে পরিষ্কার সমাধান come

— ম্যাথু
সূত্র
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;
}

এই কোডটি @ আইইন টড দ্বারা প্রবর্তিত হয়েছিল এবং আমি ভেবেছিলাম আমার এটি ভাগ করা উচিত

— মিলাদ
সূত্র
এটি শুধু সিএসএস নয়। এটি ঠিক অন্য একটি জেএস পদ্ধতি। আকর্ষণীয় এক।
— ওয়াটাওয়ালে
0

একটি বুলেট-প্রুফ, জেনেরিক উপায় রয়েছে:

  1. বিবেচনা সম্ভাব্য সব মাপা শৈলী inputউপাদান
  2. এইচটিএমএল বা পরিবর্তন না করে কোনও ইনপুটটিতে পরিমাপটি প্রয়োগ করতে সক্ষম হোন

কোডপেন ডেমো

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" />

তবে আপনি যদি খাঁটি জেএস ব্যবহার করেন তবে আপনার ইভেন্ট হ্যান্ডলারগুলি সেট করা উচিত, যেমন:

<input oninput="this.setAttribute('size', this.value.length)" />
— আকিম ল্যুবচেঙ্কো
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.