Clever Geek Handbook

Increase the size of the input field when entering text

I have a pretty simple CSS question. I have an input textbox and on page load I would like it to be 150px wide.

However, when the user enters any text, if the text is more than 150 pixels wide, the width should automatically adjust.

Here's the plunker:

http://plnkr.co/edit/ig0BQrJDiEtXKV8zJ2w2?p=preview

HTML:

<input class="input-class" type="text" placeholder="Placeholder">

CSS

.input-class-2 {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
  border-image: none;
  border-style: none none dashed;
  border-width: 0 0 1px;
  color: #ef8e80;
  cursor: pointer;
  font-family: Gotham-Book;
  font-size: 18px;
  min-width: 150px;
}

I assumed min-width would do it.

+3


source to share


4 answers


It is currently impossible to achieve this with pure CSS, perhaps one day calc

and attr

may be used in combination, but not currently. Therefore, we must go back to JavaScript.

There is no real reason to use jQuery for this. You can argue that your "problems should be seperated", that is, code should be decoupled from markup, but that is easy to do with addEventListener

. However, if I am dealing with one little bit of JavaScript, it tends to be faster - in terms of implementation, page rendering, and even for those trying to keep track of what the input is doing, behaves strangely - for using the built-in event listeners.

<input type="text" 
       style="min-width: 150px;" 
       onkeyup="this.size = Math.max(this.value.length, 1)" 
/>

or

<input type="text" 
       style="width: 150px;" 
       onkeyup="
         this.style.width = '1px';
         this.style.width = (
             this.scrollWidth &gt; 140
           ? this.scrollWidth + 10
           : 150
         )+'px';
       " 
/>

Denial of responsibility. Obviously, if you implement many of these inputs, it is much better to code a generic function to handle them. Also, it's always best to avoid inline styling by using a stylesheet.

/**
 * Directly setting the size attribute, with minWidth
 */
function autosize(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    var v = Math.max(t.value.length, 1);
    t.setAttribute
      ? t.setAttribute('size', v)
      : (t['size'] = v)
    ;
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};


The size attribute is the most obvious choice, although you can directly set the width & mdash; if you prefer - using scrollWidth

.

/**
 * Directly setting width, with minWidth
 */
function autosize(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    t.style.width = '1px';
    t.style.width = t.scrollWidth + 'px';
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

You can call any of these functions by passing your target element as the first argument. There are several ways to find your element, the easiest and most versatile creature getElementById

. Although you will only be able to find your element if it has been parsed by the browser, so the script tag you are using is to run the following code: - either must be placed under the element in the label, i.e. the bottom <body>

(preferred), or after waiting for the window to load or DOM ready.

autosize( document.getElementById('myinput'), 150 );

      

        
        
        
      

    

/**
 * Directly setting width, with minWidth
 */
function autosize1(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    t.style.width = '1px';
    t.style.width = t.scrollWidth + 'px';
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

/**
 * Directly setting the size attribute, with minWidth
 */
function autosize2(elm, minWidth){
  var keyup = function(e){
    var t = e.target || e.srcElement;
    var v = Math.max(t.value.length, 1);
    t.setAttribute
      ? t.setAttribute('size', v)
      : (t['size'] = v)
    ;
  };
  elm.style.minWidth = minWidth+'px';
  elm.addEventListener
    ? elm.addEventListener('keyup', keyup)
    : elm.attachEvent('onkeyup', keyup)
  ;
};

autosize1( document.getElementById('a'), 150 );
autosize2( document.getElementById('b'), 150 );
      

        
        
        
      

    
<p>Each input is using a different implementation:</p>
<input type="text" 
       style="min-width: 150px;" 
       onkeyup="this.size = Math.max(this.value.length, 1)" 
/><br />
<input type="text" 
       style="width: 150px;" 
       onkeyup="
         this.style.width = '1px';
         this.style.width = (
             this.scrollWidth &gt; 140
           ? this.scrollWidth + 10
           : 150
         )+'px';
       " 
/><br />
<input type="text" id="a" /><br />
<input type="text" id="b" /><br />
Run codeHide result


+3


source


You can try this:

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    .keyup(resizeInput)
    .each(resizeInput);

JSFIDDLE DEMO

There is another alternative to use



<span contenteditable="true">Some Text</span>

instead of tags Input

.

JSFIDDLE DEMO

+2


source


You can try something like this

$('.input-class').keyup(function(){
    var textlength=$('.input-class').val().length
    $(this).width(textlength * 8)
})
      

        
        
        
      

    
.input-class{
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
  border-image: none;
  border-style: none none dashed;
  border-width: 0 0 1px;
  color: #ef8e80;
  cursor: pointer;
  font-family: Gotham-Book;
  font-size: 18px;
  min-width: 150px;
    width:auto;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class="input-class" type="text" placeholder="Placeholder">
Run codeHide result


+1


source


Tried using pure JavaScript. I am hiding a span element that is not shown ( visibility:hidden;

) to the user. Then I calculate the width of the span elements and set them to the input container.
And setting the input width:100%;

causes the parent to grow in size.

var field = document.getElementById("grow");
field.oninput = function() {
  var ruler = document.getElementById("ruler");
  ruler.innerHTML = field.value.replace(/ /g,"&nbsp;");
  var outer = document.getElementById("outer");
  if (ruler.offsetWidth > 100) {
    outer.setAttribute('style', "width:" + (ruler.offsetWidth + 5) + "px;");
  } else {
    outer.setAttribute('style', "");
  }
};
      

        
        
        
      

    
#grow {
  height: 100%;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
}
#outer {
  width: 100px;
  font-size: 1rem;
  font-family: Serif, "Times New Roman", Georgia;
}
.hidden {
  position: absolute;
  display: inline;
  visibility: hidden;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  white-space: nowrap;
}
      

        
        
        
      

    
<div id="outer">
  <span id="ruler" class="hidden"></span>
  <input id="grow" type="text/plain"/>
</div>
<p>+ Expands</p>
<p>+ shrinks</p>
<p>+ whitespace handling</p>
Run codeHide result


+1


source






More articles:


All Articles