input标签根据输入字符动态自适应宽度的实现
。
思路一：监听input框的onkeyup和onkeydown事件
<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">
以上是理应input的size属性来控制input的宽度的
思路二：propertychange监听input里面的字符变化,属性改变事件
<input class="aa" type="text" value id="a" name="ss">来点>我1 <input class="aa" type="text" value id="s" name="ss" />来点/>我2 <input class="aa" type="text" value id="d" name="ss">来点<></>我3</input> <script> $(function(){ //propertychange监听input里面的字符变化,属性改变事件 $('.aa').bind('input propertychange', function() { var $this = $(this); console.log($this); var text_length = $this.val().length;//获取当前文本框的长度 var current_width = parseInt(text_length) *16;//该16是改变前的宽度除以当前字符串的长度,算出每个字符的长度 console.log(current_width) $this.css("width",current_width+"px"); }); }) </script>
思路三：比较靠谱的方法（也存在问题）
//获取文本宽度 var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; }; //input宽度自适应 $("input").unbind('keydown').bind('keydown', function(){ $(this).width(textWidth($(this).val())); });
以上脱离css单独用js控制的方法，都有一个严重的弊端，那就是忽略了不同字母和数字实际占位宽度不一致。
也就是说，在使用系统默认字体、设置font-size相同的情况下，一个汉字占一个font-size的大小，一个字母占半个font-size的大小，而数字占font-size的大小不知道是啥规律，既不是一个也不是半个font-size，但是在input中实际显示占的位置却不一样
如果是中英文混杂，效果就差强人意（计算的宽度很不准确）。
解决办法：
要设定好css的字体大小和字体family，我目前发现宋体中字母和数字都遵循宽度和实际占位都是半个font-size，所以暂且使用字体为宋体，但宋体不太好看，其他字体还有待测试
jQuery计算文本宽度的原理是利用html提供的<pre>标签，向dom中动态添加<pre>标签，标签里的内容就是要测试长度的文本，获取完长度之后再删除刚才添加的<pre>标签，从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢，那来看看<pre>标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是，计算文本长度时文本里面最好不要有其他标签。以下是实现代码：可以直接复制引入jq看效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> </head> <style> input{ background:#ddd; border:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; height:22px; padding: 0 10px; text-align: center; font-size:14px; width: 2px; font-family:simsun; } pre{ font-family:simsun;font-size:14px; } </style> <body> <input type="text" value="ffsdfs"> <script> $("input").unbind("input").bind("input",function(){ console.log(1111111); var width=textWidth($(this).val()); $(this).width(width) }) //获取文本宽度 var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; }; // 初始化时获取文本宽度 自己加的 $("input").width(textWidth($("input").val())) </script> </body> </html>
根据自己的需求可以灵活运用
。
