@EncyKe 2016-10-26T02:50:13.000000Z 字数 1997 阅读 2017

手记：Textarea 的 input 事件

#手记

手记：Textarea 的 input 事件

1. 缘起

1.1. 需求

在一次移动电商页面的开发中，在处理一枚用户留言的 textarea 时，遇到这样的需求——

一枚 textarea，默认一行显示；
输入时如若换行，则随输入逐行下拉 textarea 区域；
最多下拉满三行即止（实则为最多输入 45 字，约三行），如再换行，不再下拉；
用户如若回退，则逐行上缩，直至一行；

1.2. 分析

应该说，这样的需求并不多见，而且之前笔者对于 textarea 的接触是比较少的，不过还是作了一些分析——

默认的 textarea 是无法根据用户输入的内容自动伸缩高度的，所以要获取内容高度，需要通过 JS 来控制；
- 监听用户的输入操作，保持 textarea 的 height 等于其 scrollHeight；
- 保持恒等的话，则在用户回退时无法再收缩回去，所以需要先将 height 预设为 auto；
设定 textarea 为单行 rows="1"，设定其最大高度为单行行高的 3 倍（其实更重要的是 maxlength="45"）；
细节处理：
- 设定不可被 resize；
- 换行相关设置；
- 隐藏垂直滚动条（此为移动版需求，PC 端的话，个人认为保留垂直滚动条会比较好）；
其它具体样式定义；

1.3. 开发

而在开发过程中，遇到的另一个比较大的问题是，如何行之有效地监听用户的输入？

最开始笔者用的是对整个 textarea 监听用户的 onkeyup 事件，然而实际效果虽基本符合需求，但性能很不好，在换行后会经历一次无法忽视的闪动后才会下拉，回退也比较迟钝。后来经过多方寻求，发现 H5 对 input 和 textarea 提供了 oninput 事件，可以监听文本框内容更改，在使用之后，发现效果正好符合预期，而且移动版对于新特性的兼容性（IE 9 及其以下不支持）并不需要太过担心。以下还是提供一枚 hack 参考，以及 JS 和 jQuery 两版的源码。

  var ie = !!window.ActiveXObject;
  if (ie) {
    object.onpropertychange = fn;
  } else {
    object.addEventListener("input", fn, false);
  }

2. 源码

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Input event of textarea</title>
    <style type="text/css">
      textarea {
        /* === 关键代码 === */
        resize: none;
        white-space: normal;
        word-break: break-all;
        overflow-y: hidden;
        max-height: 63px;  /* $line-height * lines-number */
        line-height: 21px; /* $line-height */
        /* === 可自定义代码 === */
        padding: 0 4px;
        font-size: 14px;
        border: 1px black solid;
        border-radius: 4px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <textarea maxlength="45" rows="1" placeholder="最多请勿超过 45 字"></textarea>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
    <script type="text/javascript">
      /* === JS 版 === */
      var textarea = document.getElementsByTagName('textarea')[0];
      textarea.addEventListener('input', function heightAdjust() {
        // 删除时上缩；
        this.style.height = 'auto';
        // 换行时下拉；
        this.style.height = this.scrollHeight + 'px';
      });
      /* === jQuery 版 ===
      $('textarea').on('input', function heightAdjust() {
        // 删除时上缩；
        $(this).css('height', 'auto');
        // 换行时下拉；
        $(this).css('height', $(this).prop('scrollHeight') + 'px');
      });
      */
    </script>
  </body>
  </html>

附：参考

监听文本框内容改变事件之oninput、onchange与onpropertychange事件的用法和区别