前端队长の技术博客

  1. 方法
  2. 代码

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

GIF

我们知道,<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>

(完)