Question

我可以在css中设置初始文本输入大小，如下所示：

width: 50px;

但是当我打字直到它达到例如200px时，我希望它能够增长。这可以用直接的css，html完成，最好不用javascript吗？

当然也要张贴你的js / jquery解决方案，但如果没有它们就可以做到 - 那就太棒了。

我在这里尝试：

http://jsfiddle.net/jszjz/2/

Answer 1

以下是仅包含CSS和Content Editable的示例：

jsFiddle Example

<强> CSS

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

<强> HTML

<div>
    <span contenteditable="true">sdfsd</span>
</div>

Answer 2

我刚刚为你写了这封信，我希望你喜欢它:)不保证它是跨浏览器的，但我认为它是：）

(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

Answer 3

如何以编程方式修改输入的size属性？

在语义上（imo），这个解决方案比接受的解决方案更好，因为它仍然使用输入字段进行用户输入，但它确实引入了一些jQuery。 Soundcloud为它们的标记做了类似的事情。

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

Answer 4

来自：Is there a jQuery autogrow plugin for text fields?

在此处查看演示：http://jsbin.com/ahaxe

插件：

(function($){

    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 0,
            comfortZone: 70
        }, o);

        this.filter('input:text').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                val = '',
                input = $(this),
                testSubject = $('<tester/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap'
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                             || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind('keyup keydown blur update', check);

        });

        return this;

    };

})(jQuery);

Answer 5

如果您设置跨度显示：inline-block，则自动水平和垂直大小调整非常有效：

<span contenteditable="true" 
      style="display: inline-block;
             border: solid 1px black;
             min-width: 50px; 
             max-width: 200px">
</span>

Answer 6

有几件事情浮现在脑海中：

在文本字段中使用onkeydown处理程序，测量文本*，并相应地增加文本框大小。

将:focus css类附加到宽度较大的文本框中。聚焦后你的盒子会变大。这不完全是你所要求的，但类似。

*在javascript中测量文本并不简单。查看this question了解一些想法。

Answer 7

在这里你可以试试这样的东西

编辑：修订示例（添加了一个新解决方案） http://jsfiddle.net/jszjz/10/

代码说明

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.
});

并且css也很简单

#adjinput{
    max-width:200px !important;
    width:40px;
    min-width:40px;
    font-size:11px;
}

编辑：另一个解决方案是让用户输入他想要的内容和模糊（焦点），抓住字符串（使用相同的字体大小）将其放在div中 - 计算div的宽度 - 然后使用漂亮的动画使用很酷的缓动效果更新输入字段宽度。唯一的缺点是输入字段在用户输入时将保持“小”。或者你可以添加一个超时:)你可以在上面的小提琴上检查这种解决方案！

Answer 8

我知道这是一个很老的帖子 - 但无论如何，我的回答可能对其他人有用，所以这里就是这样。我发现如果我对于contenteditable div的CSS样式定义的最小高度为200而不是200的高度，那么div会自动缩放。

Answer 9

当然，您使用哪种方法取决于您的最终目标。如果您想使用表单提交结果，那么使用本机表单元素意味着您不必使用脚本来提交。此外，如果关闭脚本，那么回退仍然有效，没有花哨的增长缩小效果。如果要从 contenteditable 元素中获取纯文本，您始终可以使用 node.textContent 之类的脚本来去除浏览器在用户输入中插入的html

此版本使用原生表单元素，稍微改进了之前的一些帖子。

它也允许内容缩小。

将此与CSS结合使用可以更好地控制。

<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';
  };
});

您可以使用与＆lt; textarea＆gt;类似的内容元素

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';
  };
});

这不会在Chrome上闪烁，其他浏览器的结果可能会有所不同，因此请进行测试。

Answer 10

这是一种对我有用的方法。当您在字段中键入内容时，它将把该文本放入隐藏的跨度中，然后获取其新的宽度并将其应用于输入字段。它随您的输入而增长和缩小，当您擦除所有输入时，防止输入实际上消失的保护措施。在Chrome中测试。（编辑：在此编辑时，可在Safari，Firefox和Edge中使用）

function travel_keyup(e)
{
    if (e.target.value.length == 0) return;
    var oSpan=document.querySelector('#menu-enter-travel span');
    oSpan.textContent=e.target.value;
    match_span(e.target, oSpan);
}
function travel_keydown(e)
{
    if (e.key.length == 1)
    {
        if (e.target.maxLength == e.target.value.length) return;
        var oSpan=document.querySelector('#menu-enter-travel span');
        oSpan.textContent=e.target.value + '' + e.key;
        match_span(e.target, oSpan);
    }
}
function match_span(oInput, oSpan)
{
    oInput.style.width=oSpan.getBoundingClientRect().width + 'px';
}

window.addEventListener('load', function()
{
    var oInput=document.querySelector('#menu-enter-travel input');
    oInput.addEventListener('keyup', travel_keyup);
    oInput.addEventListener('keydown', travel_keydown);

    match_span(oInput, document.querySelector('#menu-enter-travel span'));
});

#menu-enter-travel input
{
	width: 8px;
}
#menu-enter-travel span
{
	visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

<div id="menu-enter-travel">
<input type="text" pattern="^[0-9]{1,4}$" maxlength="4">KM
<span>9</span>
</div>

Answer 11

如果您被允许使用ch测量（等距），它将完全解决我想做的事情。

onChange(e => {
    e.target.style.width = `${e.target.length}ch`;
})

这正是我所需要的，但是我不确定它是否适用于动态宽度字体系列。

Answer 12

对于那些严格寻找适用于输入或文本区域的解决方案的人来说，this是我遇到的最简单的解决方案。仅有几行CSS和一行JS。

JavaScript在元素上将data- *属性设置为等于输入值。输入是在CSS网格中设置的，其中网格是使用data- *属性作为其伪元素的伪元素内容。内容就是将网格延伸到适当的位置大小取决于输入值。

Answer 13

您需要做的就是，获取要在键入时增加的输入字段的元素，并在CSS中，将输入的宽度设置为auto，并将最小宽度设置为50px。

当我键入时，使html文本输入字段增长？

13 个答案: