In this article, we can discuss Auto Expand inputs and textarea

Auto Expand inputs and textarea

Auto Expand inputs and textarea

<input> and <textarea> elements don’t change size based on the content they contain. In fact, there isn’t any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case.

Non-input elements auto-expand

It’s weird to me that there is no way to force an input element to mimic this behavior, but alas.
We can make any element editable and input-like with the contenteditable attribute:

<span 
  class="input" 
  role="textbox" 
  contenteditable>
    auto expand
</span>

That <span> will grow to be the width it needs to be for the content it contains. If it was a <div> or any other element that is block-level, it would also expand vertically as needed.

non-input elements accessible?

So let’s say we stick with <input> and <textarea>. Can we make them resize-able even though it’s not particularly natural?
One idea I had is to wrap the input in a relative inline parent and position it inside. Then, with JavaScript, we could sync the input value with a hidden span inside that wrapper, pushing the width wider as needed.
For textarea, one classic technique is to count the number of line-breaks, use that to set the height, then multiply it by the line-height. That works great for preformatted text, like code, but not at all for long-form paragraph-like content.

with <span> element using contenteditable attribute

<span class="input" role="textbox" contenteditable>99</span>

HTML

<input type="text" class="width-dynamic" placeholder="Type text here to test."/>

CSS

body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}
input {
    padding: 15px;
    align-self: center;
    min-width: 80px;
    max-width: 500px;
}

JavaScript

$.fn.textWidth = function(text, font) {
    
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));
    
    return $.fn.textWidth.fakeEl.width();
};

$('.width-dynamic').on('input', function() {
    var inputWidth = $(this).textWidth();
    $(this).css({
        width: inputWidth
    })
}).trigger('input');


function inputWidth(elem, minW, maxW) {
    elem = $(this);
    console.log(elem)
}

var targetElem = $('.width-dynamic');

inputWidth(targetElem);

Output

Auto Expand inputs and textarea

Another Example for input and textarea


JavaScript one-liner that is very clever. 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.

HTML

<label class="input-sizer">
  <span>Name: </span>
  <input type="text" onInput="this.parentNode.dataset.value = this.value" size="4" placeholder="John">
</label>

<label class="input-sizer">
  <span>DOB: </span>
  <input type="text" onInput="this.parentNode.dataset.value = this.value" size="1" placeholder="5">
</label>

<label class="input-sizer stacked">
  <span>Text: </span>
  <textarea oninput="this.parentNode.dataset.value = this.value" rows="1" placeholder="hi"></textarea>
</label>

SCSS

*,
*::before,
*::after { 
  box-sizing: border-box;
}

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  border: solid 1px;
  padding: .25em .5em;
  margin: 5px;
  
  &.stacked {
    padding: .5em;
    align-items: stretch;
    
    &::after,
    input,
    textarea {
      grid-area: 2 / 1;
    }
  }
  
  &::after,
  input,
  textarea {
    width: auto;
    min-width: 1em;
    grid-area: 1 / 2;
    font: inherit;
    padding: 0.25em;
    margin: 0;
    resize: none;
    background: none;
    appearance: none;
    border: none;
  }
  
  span {
    padding: 0.25em;
  }
  
  &::after {
    content: attr(data-value) ' ';
    visibility: hidden;
    white-space: pre-wrap;
  }
  
  &:focus-within {
    outline: solid 1px blue;
    box-shadow: 4px 4px 0px blue;
    
    > span { color: blue; }
    
    textarea:focus,
    input:focus {
      outline: none;
    }
  }
}

.input-sizer {
  box-shadow: 4px 4px 0px #000;
  > span {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 2px 2px 0 rgba(0,0,0,.15);
  }
}

Output

Auto Expand inputs and textarea

Also Check out AngularJS Signup Form Validation on Submit

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *