input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题）

最新推荐文章于 2024-05-21 13:55:13 发布

豆趣编程

最新推荐文章于 2024-05-21 13:55:13 发布

阅读量1.4w

点赞数 4

文章标签： input宽度自适应字体占位不同字母占位宽度

本文链接：https://blog.csdn.net/lianzhang861/article/details/84306139

版权

项目中想做个input随着打字，input的宽随着字数变化而长度变化

看了有人说用onkeydown,onkeyup配合使用

<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">

还有这么说的


<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中实际显示占的位置却不一样

比如font-size为12px，我打三个汉字

宽度为36px；

我再打三个字母

因为字母宽度为半个font-size，所以宽度为18px,但是明显看出两边出现空白，字母多了看的更明显

所以上述方法打中文没啥问题，一旦出现中英文数字混打就出现问题

解决办法：

要设定好css的字体大小和字体family，我目前发现宋体中字母和数字都遵循宽度和实际占位都是半个font-size，所以暂且使用字体为宋体，但宋体不太好看，其他字体还有待测试

此方法参考博文https://www.cnblogs.com/mymelody/p/5674261.html

jQuery计算文本宽度的原理是利用html提供的<pre>标签，向dom中动态添加<pre>标签，标签里的内容就是要测试长度的文本，获取完长度之后再删除刚才添加的<pre>标签，从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢，那来看看<pre>标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是，计算文本长度时文本里面最好不要有其他标签。以下是实现代码：可以直接复制引入jq看效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
<input type="text" >
<script type="text/javascript">
    $("input").unbind("input").bind("input",function(){
        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;
    };
</script>
</body>
</html>

pre和input的font-size和font-family要设置相同，font-family使用宋体

这样看起来就没有任何问题了，唯一缺点是宋体不好看，美观问题还有待研究

豆趣编程

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
input标签根据输入字符动态自适应宽度的实现（解决字母数字显示占位大小不同问题）

项目中想做个input随着打字，input的宽随着字数变化而长度变化看了有人说用onkeydown,onkeyup配合使用&lt;input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length&gt;4?this.value.length:4);" size="4"&gt;还有...
复制链接

扫一扫