Input Auto Resize

The InputAutoResize.js script causes your inputs to be extended as you type.

Usage

  <!--page.html -->

  <input type="text" autoresize >

  <!--page.html -->

  <script src="InputAutoResize.js"></script> 
  <script>
    InputAutoResize()
  </script>

Tag Options

Attributes	Description	Type	Default
width=""	Initial input size	Number	200px
maxWidth=""	Maximum input size	Number / String	auto

Example

  <input autoresize type="text" width="150" maxWidth="450">

⚠️ Note: In maxWidth you can also add the #id of the container, parent div or form that wraps the inputs, so the maximum size of the input will be based on its parent div.

Example

  <form id="form">
    <div class="row">
      <input autoresize type="text" width="150" maxWidth="#form">
    </div>
  </form>

Function Options

Option	Description	Type	Default
fontFamily:	Font style	String	auto
fontSize:	Font size	Number	initial
padding:	Input padding	Number	null

Example

  InputAutoResize({
    fontSize: 16,
    padding: 5
  })

Created by André Malveira