0

How can I make a input type automatically expand? The code works properly for textarea but not in input type textbox.

$('input').on({
  input: function() {
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    $(this).css({
      'height': totalHeight
    });
  }
});
input {
  width: 200px;
  height: 15px;
  line-height: 15px;
  min-width: 200px;
  max-width: 300px;
  transition: width 0.25s;
  resize: none;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myinput" runat="server" placeholder="Text" type="text" data-autosize-input='{ "space": 40 }' />
mplungjan
  • 169,008
  • 28
  • 173
  • 236
aparna rai
  • 823
  • 10
  • 24
  • 1
    `` is defined to be single line only. It can never expand into two lines. Use ` – Amadan Jun 14 '18 at 11:22
  • Duplicate upon duplicate. Please do a proper research before asking – mplungjan Jun 14 '18 at 11:23
  • @mplungjan: Not a duplicate - note that OP wants `` to resize in *height*. – Amadan Jun 14 '18 at 11:28
  • 1
    This one is: https://stackoverflow.com/questions/23818131/dynamically-expand-height-of-input-type-text-based-on-number-of-characters-typ with example here: http://jsfiddle.net/M6SM2/488/ – mplungjan Jun 14 '18 at 11:41

0 Answers0