实现宽度随输入内容而变的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;   // 返回宽度值
    }