当前位置: 博客 /  JavaScript  / 实现宽度随输入内容而变的Input输入框

实现宽度随输入内容而变的Input输入框

效果参考

验证正则表达式中输入正则表达式的输入框的宽度随输入内容变化。

分析

  1. 需要一个input输入框:

    不需要设置宽度width,因为width将会根据输入内容计算出来;

    需要设置最小宽度min-width,防止无内容时宽度为0,找不到input则无法使用;

    需要设置最大宽度max-width,防止输入内容过长,破坏布局。

  2. 当在此input输入内容时,触发一个函数,用来计算输入内容的宽度,并且根据计算出的宽度调整这个input的宽度:

    首先获取到输入的文本,将文本加入一个html元素中,在文档流中加入这个元素并隐藏;

    然后获取这个元素的宽度,获取完成后移除这个元素;

    最后将这个宽度赋值给input的width。

  3. 关键点:input输入框影响宽度的样式必须与这个临时元素影响宽度的样式相同,否则会造成宽度计算不准确。

代码

  1. HTML

    加入一个input输入框,文本样式为.txt,宽度设置在.inputTxt

     <input id="input" class="inputTxt txt" type="text" name="" value="" />
    
  2. CSS

    .txt样式为input与临时添加元素相同的文本样式,因此提取出来。

     .inputTxt{
       min-width:10px;
       max-width:300px;
       display:inline-block;
     }
     .txt{
       border:none;
       outline:none;
       padding:0;
       margin:0;
       text-align:left;
       font-weight:bold;
       font-size:18px;
       letter-spacing: 2px;
     }
    
  3. JS

     $("#input").on('input',function(){ // 当input输入框输入内容
       var text = $(this).val().trim();  // 获取输入的内容
       var inputWidth = getTextWidth(text);  // 宽度为调用函数getTextWidth的返回值
       $(this).css("width", inputWidth + "px");  //动态修改输入框的宽度
     })
    
     function getTextWidth(text) {
       // 定义一个临时元素tempEle,元素文本为参数传递进来的文本,文字样式为与输入框相同的`.txt`,在页面中不可见
       var tempEle = $('<p class="txt">' + text + "</p>").css({
         display: "none"
       });
       $("body").append(tempEle);  // 在body结尾插入元素
       var width = tempEle.width(); //获取临时元素的宽度
       tempEle.remove(); // 获取完成移除该临时元素
       return width;   // 返回宽度值
     }
    

- END -