Question

input宽度自适应实现，javascript中width()计算的值偏小，求解

1.【场景条件】输入的内容中含有大写字母及中文；
2.先通过<pre>+ text +<pre>计算输入内容的宽度，text是指我在input中输入的内容；
3.实时监听，将步骤2中的宽度赋值给当前的input文本框，发现文本框内容显示不全；
4.将text中的大写字母全部改成小写字母，不含中文，就可以完全显示。

求大神解答：
感觉width()计算的宽度值在内容含有大写字母及中文时是比实际宽度偏小的，请问是为什么？

Answer 1

很多时候文本框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设置input的宽度自适应。

工具原料：编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。

2、首选获取文本的宽度，利用pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体，简单的代码示例如下：

3、根据以上获取到的文字的宽度来给input绑定事件动态改变宽度，简单的代码示例如下：