发表新帖
发表新帖

make html text input field grow as I type?

前端 未结
关注
12 1059
陌清茗
陌清茗 2020-11-27 12:02

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.

相关标签:
12条回答
  • 盖世英雄少女心
    2020-11-27 12:35

    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  > minWidth && newVal <= 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!

    0 讨论(0)
  • 甜味超标
    2020-11-27 12:38

    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.

    <html>

<textarea></textarea>
<br>
<input type="text">


<style>

textarea {
  width: 300px;
  min-height: 100px;
}

input {
  min-width: 300px;
}


<script>

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 <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.

    0 讨论(0)
  • 梦如初夏
    2020-11-27 12:39

    Here is an example with only CSS and Content Editable:

    jsFiddle Example

    CSS

    span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}

    HTML

    <div>
    <span contenteditable="true">sdfsd</span>
</div>
    0 讨论(0)
  • 一整个雨季
    2020-11-27 12:39

    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.

    <input size="1" />

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'), 10),
        isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z
                     (evt.which >= 48 && evt.which <= 57) || // 0-9
                     evt.which === 32;

    if ( evt.which === 8 && size > 0 ) {
        // backspace
        $this.attr('size', size - 1);
    } else if ( isValidKey ) {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});

    http://jsfiddle.net/Vu9ZT/

    0 讨论(0)
  • 再見小時候
    2020-11-27 12:39

    If you're allowed to use the ch measurement (monospaced) it completely solved what I was trying to do.

    onChange(e => {
    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.

    0 讨论(0)
  • 半阙折子戏
    2020-11-27 12:40

    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(/&/g, "&amp;")
                                       .replace(/</g, "&lt;")
                                       .replace(/>/g, "&gt;")
                                       .replace(/"/g, "&quot;")
                                       .replace(/'/g, "&#039;")
                                       .replace(/ /g, '&nbsp;');
            input.parentNode.appendChild(tmp);
            var width = tmp.clientWidth+pad_right+1;
            tmp.parentNode.removeChild(tmp);
            if(min <= width && width <= max)
                input.style.width = width+'px';
        }, 1);
    }
})();

    JSFiddle

    0 讨论(0)
 看不清?
提交回复
热议问题