make html text input field grow as I type

Question

I can set initial text input size in css  like so   width  50px    But I would like it to grow when I type until it reaches for example 200px  Can this be done in straight css  html  preferably without javascript   Do post your js jquery solutions too of course  but if this is doable without them - that be great   my try here   http   jsfiddle net jszjz 2

User · Answer

If you are just interested in growing  you can update the width to scrollWidth  whenever the content of the input element changes   document querySelectorAll  input type  text     forEach function node      node onchange   node oninput   function         node style width   node scrollWidth  px              But this will not shrink the element

User · Answer

If you re allowed to use the ch measurement  monospaced  it completely solved what I was trying to do  onChange e   gt        e target style width      e target length ch       This was exactly what I needed but I m not sure if it works for dynamic width font-families

User · Answer

If you set the span to display  inline-block  automatic horizontal and vertical resizing works very well    x000D   x000D   lt span contenteditable  true   x000D        style  display  inline-block  x000D               border  solid 1px black  x000D               min-width  50px   x000D               max-width  200px  gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

How about programmatically modifying the size attribute on the input   Semantically  imo   this solution is better than the accepted solution because it still uses input fields for user input but it does introduce a little bit of jQuery  Soundcloud does something similar to this for their tagging    lt input size  1    gt      input   on  keydown   function evt        var  this     this           size   parseInt  this attr  size    10           isValidKey    evt which  gt   65  amp  amp  evt which  lt   90        a-zA-Z                       evt which  gt   48  amp  amp  evt which  lt   57        0-9                      evt which     32       if   evt which     8  amp  amp  size  gt  0                backspace          this attr  size   size - 1         else if   isValidKey                all other keystrokes          this attr  size   size   1               http   jsfiddle net Vu9ZT

User · Answer

Here you can try something like this  EDIT  REVISED EXAMPLE  added one new solution  http   jsfiddle net jszjz 10   Code explanation  var jqThis       adjinput      object of the input field in jQuery     fontSize   parseInt  jqThis css  font-size       2    its font-size       its min Width  the box won t become smaller than this     minWidth  parseInt  jqThis css  min-width             its maxWidth  the box won t become bigger than this      maxWidth  parseInt  jqThis css  max-width       jqThis bind  keydown   function e     on key down    var newVal    this value length   fontSize     compute the new width     if  newVal   gt  minWidth  amp  amp  newVal  lt   maxWidth     check to see if it is within Min and Max        this style width   newVal    px     update the value        and the css is pretty straightforward too   adjinput      max-width 200px  important      width 40px      min-width 40px      font-size 11px      EDIT  Another solution is to havethe user type what he wants and on blur  focus out   grab the string  in the same font size  place it in a div - count the div s width - and then with a nice animate with a cool easing effect update the input fields width  The only drawback is that the input field will remain  small  while the user types  Or you can add a timeout      you can check such a kind of solution on the fiddle above too

User · Answer

Here s a method that worked for me   When you type into the field  it puts that text into the hidden span  then gets its new width and applies it to the input field   It grows and shrinks with your input  with a safeguard against the input virtually disappearing when you erase all input   Tested in Chrome   EDIT  works in Safari  Firefox and Edge at the time of this edit    x000D   x000D  function travel keyup e  x000D    x000D      if  e target value length    0  return  x000D      var oSpan document querySelector   menu-enter-travel span    x000D      oSpan textContent e target value  x000D      match span e target  oSpan   x000D    x000D  function travel keydown e  x000D    x000D      if  e key length    1  x000D        x000D          if  e target maxLength    e target value length  return  x000D          var oSpan document querySelector   menu-enter-travel span    x000D          oSpan textContent e target value        e key  x000D          match span e target  oSpan   x000D        x000D    x000D  function match span oInput  oSpan  x000D    x000D      oInput style width oSpan getBoundingClientRect   width    px   x000D    x000D   x000D  window addEventListener  load   function   x000D    x000D      var oInput document querySelector   menu-enter-travel input    x000D      oInput addEventListener  keyup   travel keyup   x000D      oInput addEventListener  keydown   travel keydown   x000D   x000D      match span oInput  document querySelector   menu-enter-travel span     x000D      x000D   menu-enter-travel input x000D    x000D   width  8px  x000D    x000D   menu-enter-travel span x000D    x000D   visibility  hidden  x000D      position  absolute  x000D      top  0px  x000D      left  0px  x000D    x000D   lt div id  menu-enter-travel  gt  x000D   lt input type  text  pattern    0-9  1 4    maxlength  4  gt KM x000D   lt span gt 9 lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I know this is a seriously old post -  but my answer might be useful to others anyway  so here goes  I found that if my CSS style definition for the contenteditable div has a min-height of 200 instead of a height of 200   then the div scales automatically

User · Answer

Here is an example with only CSS and Content Editable  jsFiddle Example CSS span        border  solid 1px black    div        max-width  200px        HTML  lt div gt       lt span contenteditable  quot true quot  gt sdfsd lt  span gt   lt  div gt    Important note regarding contenteditable Making an HTML element contenteditable lets users paste copied HTML elements inside of this element  This may not be ideal for your use case  so keep that in mind when choosing to use it

User · Answer

Which approach you use  of course  depends on what your end goal is  If you want to submit the results with a form then using native form elements means you don t have to use scripting to submit  Also  if scripting is turned off then the fallback still works without the fancy grow-shrink effects  If you want to get the plain text out of a contenteditable element you can always also use scripting like node textContent to strip out the html that the browsers insert in the user input   This version uses native form elements with slight refinements on some of the previous posts   It allows the content to shrink as well   Use this in combination with CSS for better control    lt html gt    lt textarea gt  lt  textarea gt   lt br gt   lt input type  text  gt     lt style gt   textarea     width  300px    min-height  100px     input     min-width  300px       lt script gt   document querySelectorAll  input type  text     forEach function node      var minWidth   parseInt getComputedStyle node  minWidth     node clientWidth    node style overflowX    auto       hidden    node onchange   node oninput   function         node style width   minWidth    px       node style width   node scrollWidth    px              You can use something similar with  lt textarea  elements  document querySelectorAll  textarea   forEach function node      var minHeight   parseInt getComputedStyle node  minHeight     node clientHeight    node style overflowY    auto       hidden    node onchange   node oninput   function         node style height   minHeight    px       node style height   node scrollHeight    px              This doesn t flicker on Chrome  results may vary on other browsers  so test

User · Answer

All you need to do is  get the element of the input field you want to grow as you type and in CSS  set the width of the input to auto and set a min-width to say 50px

User · Answer

For those strictly looking for a solution that works for input or textarea  this is the simplest solution I ve came across  Only a few lines of CSS and one line of JS   The JavaScript sets a data-  attribute on the element equal to the value of the input  The input is set within a CSS grid  where that grid is a pseudo-element that uses that data-  attribute as its content  That content is what stretches the grid to the appropriate size based on the input value

User · Answer

A couple of things come to mind    Use an onkeydown handler in your text field  measure the text   and increase the text box size accordingly   Attach a  focus css class to your text box with a larger width  Then your box will be larger when focused  That s not exactly what you re asking for  but similar     It s not straightforward to measure text in javascript  Check out this question for some ideas

User · Answer

From  Is there a jQuery autogrow plugin for text fields     See a demo here  http   jsbin com ahaxe  The plugin    function            fn autoGrowInput   function o             o     extend               maxWidth  1000              minWidth  0              comfortZone  70            o            this filter  input text   each function                 var minWidth   o minWidth      this  width                    val                       input     this                   testSubject       lt tester  gt    css                       position   absolute                       top  -9999                      left  -9999                      width   auto                       fontSize  input css  fontSize                        fontFamily  input css  fontFamily                        fontWeight  input css  fontWeight                        letterSpacing  input css  letterSpacing                        whiteSpace   nowrap                                      check   function                          if  val      val   input val      return                           Enter new content into testSubject                     var escaped   val replace   amp  g    amp amp    replace   s g   amp nbsp    replace   lt  g    amp lt    replace   gt  g    amp gt                         testSubject html escaped                           Calculate new width   whether to change                     var testerWidth   testSubject width                            newWidth    testerWidth   o comfortZone   gt   minWidth   testerWidth   o comfortZone   minWidth                          currentWidth   input width                            isValidWidthChange    newWidth  lt  currentWidth  amp  amp  newWidth  gt   minWidth                                                   newWidth  gt  minWidth  amp  amp  newWidth  lt  o maxWidth                           Animate width                     if  isValidWidthChange                            input width newWidth                                                          testSubject insertAfter input                  this  bind  keyup keydown blur update   check                         return this              jQuery

User · Answer

I just wrote this for you  I hope you like it    No guarantees that it s cross-browser  but I think it is      function        var min   100  max   300  pad right   5  input   document getElementById  adjinput         input style width   min  px       input onkeypress   input onkeydown   input onkeyup   function            var input   this          setTimeout function                var tmp   document createElement  div                tmp style padding    0               if getComputedStyle                  tmp style cssText   getComputedStyle input  null  cssText              if input currentStyle                  tmp style cssText   input currentStyle cssText              tmp style width                   tmp style position    absolute               tmp innerHTML   input value replace   amp  g    amp amp                                            replace   lt  g    amp lt                                            replace   gt  g    amp gt                                            replace    g    amp quot                                            replace    g    amp  039                                            replace    g    amp nbsp                 input parentNode appendChild tmp               var width   tmp clientWidth pad right 1              tmp parentNode removeChild tmp               if min  lt   width  amp  amp  width  lt   max                  input style width   width  px              1                 JSFiddle

[javascript] make html text input field grow as I type?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css