功能实现之输入框根据内容大小改变

前段时间，项目让我实现输入框大小跟随input的内容大小改变，一时懵逼，网上看了看效果也不好，大多都是根据input的size来设置，但是每个字符大小是不一样的，这样就会有明显的偏差，效果很不好。想了2个小时后，我终于想出了解决办法=、=，然后又历经各种问题才实现了可用性较高的方法，下面我就详细讲述一下我的解决方案。

在完全开始准备写这篇博客时，突然发现了一个更简单的方法，之前的就不讲了，垃圾代码！毁我青春！

---

原版：我们想让输入框的大小和内容想匹配，那么我们肯定就需要知道内容显示的长度……(此处省略1000字)

新版：

思路

我们为了让输入框的大小和内容匹配，我只需要回去内容显示需要的长度就可以了，如何获取呢？

scrollWidth

= =没错，就用scrollWidth就行了，然后把这个值给输入框就行了。

曾经天真的我，还去生成一个元素来显示文本，获取长宽。

唉，年轻啊！

代码实现

初级实现

<input type="text">
<script>
  document.querySelector("input").addEventListener("input",function(){
    this.style.width="0px";
    this.style.width=this.scrollWidth+"px";
  });
</script>

这样就可以让大小根据输入的内容改变大小了。

代码中

this.style.width="0px";

是为了让 scrollWidth 获取最小值，才能达到回缩的效果。也是最快捷的方法。

但是我们一般都有最大和最小的宽度的限制，所以需要简单的改进

中级实现

<input type="text">
<script>
  document.querySelector("input").addEventListener("input",function(){
    this.style.width=minWidth+"px";
    this.style.width=((this.scrollWidth<maxWidth)?this.scrollWidth:maxWidth)+"px";
  });
</script>

这样通过对 minWidth 和 maxWidth 设值就可以完成对最大和最小的宽度的限制了，当然也可以进行提前判断来优化，减少对dom的操作。

高级实现

同样的我们可以将函数抽离出来，进行封装。

<input type="text">
<script>
  document.querySelector("input").addEventListener("input",$0_0({
    minWidth:100,
    maxWidth:300,
  }));

  function $0_0(obj){
      let {
          minWidth = 0,
          maxWidth = Infinity,
          back = true,
          widthChange
      } = obj;

      return function(){
          if(this.scrollWidth<minWidth||this.scrollWidth>maxWidth)return;

          if(back)
              this.style.width=minWidth+"px";

          if(typeof widthChange === 'function')
              widthChange.call(this,((this.scrollWidth<maxWidth)?this.scrollWidth:maxWidth))
      }
  }
</script>

这样我们就完成了一个简单的封装了=、=，如果还有扩展都只需要添加一些判断就行了。

代码

function $0_0(obj){
    let {
        minWidth = 0,
        maxWidth = Infinity,
        back = true,
        widthChange
    } = obj;

    return function(){
        if(this.scrollWidth<minWidth||this.scrollWidth>maxWidth)return;

        if(back)
            this.style.width=minWidth+"px";

        if(typeof widthChange === 'function')
            widthChange.call(this,((this.scrollWidth<maxWidth)?this.scrollWidth:maxWidth))
    }
}

END

2017-04-25 扩展了widthChange方法，方便框架的调用

2016-10-30 完成