CSS实现input宽度根据输入内容自适应
先来看一下我们要实现的效果:
常规的方案是通过 JS 获取输入的文本长度后乘以文本的宽度,但中英文的文本宽度不相同,所以通过此类方式实现的效果不太理想。
还有一种用 html 的contenteditable
属性来模拟 input 的方案,这种方案在 web 中确实可行,但是无法兼容各小程序。
CSS 实现该效果的原理:
1、用 div 嵌套 input 和 label ;
2、将 input 输入的内容同步到 label 中,并将 label 设置成不可见;
3、将 input 盖在 label 上;
看完以上步骤,聪明的你是不是已经猜到实现细节了呢。
其实是用 label 来撑开父容器的宽度,再让 input 的宽度自适应父容器的宽度即可。
具体实现代码如下:
/* html 代码 */ <div class="input-box"> <label id="label" class="input-box__label"></label> <input type="text" id="input" class="input-box__input"/> </div>
CSS 代码:
css 部分需要需要注意 input 和 label 的font-family
和font-size
必须一致
/* css 代码 */ .input-box { display: inline-flex; align-items: center; box-sizing: border-box; position: relative; border: 1px solid #000; border-radius: 5px; height: 40px; min-width: 50px; /* font family is very important */ font-family: Arial,'microsoft yahei'; font-size: 14px; } .input-box__label { display: inline-block; font-size: inherit; line-height: normal; visibility: hidden; font-family: inherit; padding: 0 10px; } .input-box__input { box-sizing: border-box; position: absolute; display: inline; font-size: inherit; font-family: inherit; line-height: normal; border-radius: inherit; height: 100%; width: 100%; outline: 0; border: 0; margin: 0; padding: 0 10px; }
JS 代码:
这里用到了 JS 将 input 输入的内容同步到 label 中,如果使用 mvvm 架构框架即可省去这一步。
document.querySelector('#input').addEventListener('input', (e) => { document.querySelector('#label').innerHTML = e.target.value; })
总结
input 宽度根据输入的内容自适应的应用场景不是很常见,但不排除有特殊需求的情况,例如金额输入框一般都希望能完整的看到所输入的金额等等。大家根据实际情况来使用,希望本文对你有帮助,感谢阅读。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS实现input宽度根据输入内容自适应
码云笔记 » CSS实现input宽度根据输入内容自适应