Question

<span>知道没有被告知的横向大小。它的横向尺寸不大于其内容。

我正在尝试找出CSS，使<input type='text'>根据value的长度自动调整水平，就像<span>的{{1}}一样}。

换句话说，没有在innerText上指定CSS width:或size属性。

我无法弄清楚如何做到这一点。有什么想法吗？

Answer 1

如果要在键入时扩展或增加输入字段的宽度，可以执行类似这样的操作

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

CSS

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

JSFiddle Demo

或者您可以使用一些jQuery

来完成此任务

<input size="1" />

<强>的jQuery

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'));

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

JSFiddle Demo

Answer 2

如果我理解你的问题，你希望跨度和输入宽度相同，无论如何，对吗？

如果是这种情况，那么这就是我要采取的方式：

用div

包裹span和input

然后，

span, input {
  display: inline-block;
  width: 100%;
}

并将包装div设置为您想要的宽度，两个元素应该对齐（自动，无论如何）和相同的宽度。

使输入元素自动调整为跨度

2 个答案: