前端队长の技术博客

1. 方法
2. 代码

如何实现下面input输入框的宽度随文字的输入长度而改变？

我们知道，<input> 输入框，如果不给一个宽度的话，那么它的宽度是固定的，想让它伸展是不可能的，那怎么办呢？

方法

我们可以给input外面套一层div，设置input的宽高为100%，让它随着父元素宽度改变而改变。那父元素div的宽高如何确定呢？

再在这个父元素div中塞一个span标签，用span的宽高撑起div的宽高。由于span标签的宽高就可以根据它内部的内容的宽高动态改变，所以div的宽高就可以动态改变，然后input的宽高也可以动态改变。

然后再将span的内容和input 的内容同步，再将span标签隐藏在input下面，暗搓搓的操纵全局。

代码

<div class="add-tag tag-item">
    <span></span>
    <input  v-model="inputValue" />
</div>

<style>
     .add-tag {
        height: 32px;
        position: relative;

        span {
            display: inline-block;
            width: 100%;
            height: 100%;
            visibility: hidden;
        }

        input {
            width: 100%;
            height: 100%;
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            border: none;
            border-bottom: 1px dashed #ccc;
        }
    }
</style>

（完）

This site is open source. Improve this page.