CSS实现input宽度根据输入内容自适应

先来看一下我们要实现的效果:

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-familyfont-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 宽度根据输入的内容自适应的应用场景不是很常见,但不排除有特殊需求的情况,例如金额输入框一般都希望能完整的看到所输入的金额等等。大家根据实际情况来使用,希望本文对你有帮助,感谢阅读。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS实现input宽度根据输入内容自适应

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们