input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题） |
您所在的位置：网站首页 › 动态大小 › input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题） |
input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题）
|
项目中想做个input随着打字，input的宽随着字数变化而长度变化 看了有人说用onkeydown,onkeyup配合使用 还有这么说的 来点>我1 来点/>我2 来点我3 $(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"); }); })还有这么说的（此方法靠谱，但也有问题） //获取文本宽度 var textWidth = function(text){ var sensor = $(''+ text +'').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中实际显示占的位置却不一样 比如font-size为12px，我打三个汉字
我再打三个字母
所以上述方法打中文没啥问题，一旦出现中英文数字混打就出现问题
要设定好css的字体大小和字体family，我目前发现宋体中字母和数字都遵循宽度和实际占位都是半个font-size，所以暂且使用字体为宋体，但宋体不太好看，其他字体还有待测试 此方法参考博文https://www.cnblogs.com/mymelody/p/5674261.html jQuery计算文本宽度的原理是利用html提供的标签，向dom中动态添加标签，标签里的内容就是要测试长度的文本，获取完长度之后再删除刚才添加的标签，从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢，那来看看标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是，计算文本长度时文本里面最好不要有其他标签。以下是实现代码：可以直接复制引入jq看效果 body{ } 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; } $("input").unbind("input").bind("input",function(){ var width=textWidth($(this).val()); $(this).width(width) }) //获取文本宽度 var textWidth = function(text){ var sensor = $(''+ text +'').css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; };pre和input的font-size和font-family要设置相同，font-family使用宋体
这样看起来就没有任何问题了，唯一缺点是宋体不好看，美观问题还有待研究 |
宽度为36px；
因为字母宽度为半个font-size，所以宽度为18px,但是明显看出两边出现空白，字母多了看的更明显
【本文地址】
今日新闻 |
推荐新闻 |