输入框跟随文字内容适配宽实现示例


Posted in Javascript onAugust 14, 2022

实现源码

// 常见一个辅助元素
const fakeEle = document.createElement('div');
// 隐藏辅助元素
fakeEle.style.position = 'absolute';
fakeEle.style.left = '-9999px';
fakeEle.style.visibility = 'hidden';
fakeEle.style.whiteSpace = 'nowrap';
// 获取输入框元素的样式
const textboxEle = document.getElementById('textbox');
const styles = window.getComputedStyle(textboxEle);
// 将输入框的字体样式赋给辅助元素
fakeEle.style.font = styles.font;
// 将辅助元素添加到页面
document.body.appendChild(fakeEle);
const setWidth = function () {
    const string = textboxEle.value || textboxEle.getAttribute('placeholder') || '';
    fakeEle.innerHTML = string.replace(/\s/g, ` `);
    // 获取辅助元素的样式
    const fakeEleStyles = window.getComputedStyle(fakeEle);
    // 将辅助元素的宽度赋给输入框元素
    textboxEle.style.width = fakeEleStyles.width;
};
setWidth();
// 监听输入框元素内容变化,输入框宽度跟随文字内容数量适配
textboxEle.addEventListener('input', function (e) {
    setWidth();
});

大概思路

其实核心点就是,如何获取输入框元素内文字内容的宽度值?

直接通过输入框元素肯定是无法获取到其文字内容宽度的,我们需要跳出输入框的限制,将文字内容独立出来。

首先,我们肯定是能够拿到输入框的文字内容的,使用 input.value 即可获取文字内容。

OK,文字内容有了,如何计算文字内容的宽度呢?

文字内容宽度

实现方案其实有 2 种,一种是使用 Canvas 的能力,另一种是使用辅助的 div 元素。

可能大部分同学还不是很了解 Canvas,所以本文就使用 div 元素的方式进行讲解。

首先,先定义好最基础的 HTML 和 CSS,代码如下:

<input id="textbox" type="text" />
input {
  padding: 8px;
}

此时,我们会得到一个最基础的输入框元素,没有任何文字内容。当我们往输入框元素内输入内容时,输入框元素的宽度也不会跟随变化。

然后通过 JavaScript 创建一个辅助的 div 元素,我们先将它添加到 body 元素内。

需要注意的是,文字内容的宽度会各被字体样式、大小、行间距等等因素所影响。本文作为讲解,暂时不考虑这么多影响因素,但会通过影响因素之一 “字体” 相关做个相关示例,提供各位同学作为参考。

const fakeEle = document.createElement('div');
const textboxEle = document.getElementById('textbox');
// 获取输入框元素样式
const styles = window.getComputedStyle(textboxEle);
// 将输入框元素的 font 属性赋给辅助的 div 元素
fakeEle.style.font = styles.font;
document.body.appendChild(fakeEle);

监听输入框元素的 input 事件,将文字内容同步给 div 辅助元素。

然后再反向的,获取 div 辅助元素的宽度,赋值给输入框元素,这样是不是就实现了啦了?

const setWidth = function () {
  const string = textboxEle.value || '';
  fakeEle.innerHTML = string;
  // 获取辅助元素的样式
  const fakeEleStyles = window.getComputedStyle(fakeEle);
  // 将辅助元素的宽度赋给输入框元素
  textboxEle.style.width = fakeEleStyles.width;
};
textboxEle.addEventListener('input', function (e) {
  setWidth();
});

我们来看看效果。

输入框跟随文字内容适配宽实现示例

当我们在输入框元素内随便输入一个内容,会发现输入框就撑满了整个页面。

输入框跟随文字内容适配宽实现示例

这是因为 div 辅助元素是块级元素,宽度默认是 100% 所导致的。那如何要获取文字内容宽度的话,要将它设置为行内元素嘛?

答案是不需要的,只要给 div 辅助元素添加绝对定位,使其脱离正常文档流即可。

// ...
fakeEle.style.position = 'absolute';
// ...

输入框跟随文字内容适配宽实现示例

输入框跟随文字内容适配宽实现示例

此时,我们会发现已经基本实现了我们想要的效果。

是的,我们已经解决了最核心的问题,但仍然还存在一些问题,需要我们进行处理。

细节处理

比如,输入多个空格的时候,宽度计算就错误了。

输入框跟随文字内容适配宽实现示例

这就需要我们将空格进行一下处理,将它替换成 &nbsp 即可,代码如下:

// fakeEle.innerHTML = string;
fakeEle.innerHTML = string.replace(/\s/g, ` `);

还有,辅助元素不应该出现在界面上,所以我们要将他隐藏掉。

// ...
fakeEle.style.left = '-9999px';
fakeEle.style.visibility = 'hidden';
fakeEle.style.whiteSpace = 'nowrap';
// ...

还有一些其它小细节,有兴趣的话,自己尝试一下吧。

以上就是输入框跟随文字内容适配宽实现示例的详细内容,更多关于输入框文字内容宽度适配的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
js判断浏览器类型的方法
Aug 07 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
javascript事件冒泡实例分析
May 13 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
微信小程序调用后台service教程详解
Nov 06 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 #Javascript
JS实现页面炫酷的时钟特效示例
Rust中的Struct使用示例详解
Aug 14 #Javascript
使用Cargo工具高效创建Rust项目
Aug 14 #Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 #Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
python进程与线程小结实例分析
2018/11/11 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python各种扩展名区别点整理
2020/02/27 Python
树莓派升级python的具体步骤
2020/07/05 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
社团招新策划书
2014/02/04 职场文书
《乞巧》教学反思
2014/02/27 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS