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


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 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
发布一款npm包帮助理解npm的使用
Jan 03 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
第二节 对象模型 [2]
2006/10/09 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php中file_exists函数使用详解
2015/05/08 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python3处理含有中文的url方法
2018/05/10 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 用struct模块解决黏包问题
2020/11/07 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
初中军训感想300字
2014/03/05 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
户外活动总结
2015/02/04 职场文书
司机个人年终总结
2015/03/03 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
python turtle绘图命令及案例
2021/11/23 Python