<input> 宽度自适应变化

栏目: Html · 发布时间: 6年前

内容简介:要实现上述的效果:输入框的宽度随着输入的文字长度变化。而<input>这个标签有自己的想法,如果没有给它设置一个固定的宽度,它就会有一个默认的不变的宽度,想让它动态伸展是不可能。那怎么办呢?那就设置它的宽高都为100%,让它随着父元素改变,那父元素的宽高如何确定呢?给个<span>标签来撑起来,<span>的宽高就可以根据它内部的内容来动态改变宽高啦,它内部的内容当然就是与<input>输入的内容同步了,把<span>标签隐藏在<input>标签下面,暗搓搓地操控全局。

<input> 宽度自适应变化

要实现上述的效果:输入框的宽度随着输入的文字长度变化。而<input>这个标签有自己的想法,如果没有给它设置一个固定的宽度,它就会有一个默认的不变的宽度,想让它动态伸展是不可能。那怎么办呢?

那就设置它的宽高都为100%,让它随着父元素改变,那父元素的宽高如何确定呢?给个<span>标签来撑起来,<span>的宽高就可以根据它内部的内容来动态改变宽高啦,它内部的内容当然就是与<input>输入的内容同步了,把<span>标签隐藏在<input>标签下面,暗搓搓地操控全局。

<div class="add-tag tag-item">
    <span>{{ inputValue }}</span>
    <input 
        ref="input"
        placeholder="添加标签"
        v-model="inputValue" 
    />
</div>

...

 .add-tag {
    color: #333;
    border-style: dashed;
    padding: 0;
    position: relative;

    span {
        display: inline-block;
        min-width: 184px;
        height: 100%;
        padding: 0 32px;
    }

    input {
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 28px;
        caret-color: #426BF2;
        ::-webkit-input-placeholder {
            color: #aaa;
        }
        border-radius: 40px;
        border-style: none;
        padding: 0 32px;
    }
}

以上所述就是小编给大家介绍的《 宽度自适应变化》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

轻量级Django

轻量级Django

茱莉亚·埃尔曼 (Julia Elman)、马克·拉温 (Mark Lavin) / 侯荣涛、吴磊 / 中国电力出版社; 第1版 / 2016-11-1 / 35.6

自Django 创建以来,各种各样的开源社区已经构建了很多Web 框架,比如JavaScript 社区创建的Angular.js 、Ember.js 和Backbone.js 之类面向前端的Web 框架,它们是现代Web 开发中的先驱。Django 从哪里入手来适应这些框架呢?我们如何将客户端MVC 框架整合成为当前的Django 基础架构? 本书讲述如何利用Django 强大的“自支持”功......一起来看看 《轻量级Django》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换