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>

根据自己的需求可以灵活运用

。