[关闭]
@EncyKe 2016-10-26T02:50:13.000000Z 字数 1997 阅读 1569

手记:Textarea 的 input 事件

#手记



1. 缘起

1.1. 需求

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

1.2. 分析

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

1.3. 开发

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

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

  1. var ie = !!window.ActiveXObject;
  2. if (ie) {
  3. object.onpropertychange = fn;
  4. } else {
  5. object.addEventListener("input", fn, false);
  6. }

2. 源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Input event of textarea</title>
  6. <style type="text/css">
  7. textarea {
  8. /* === 关键代码 === */
  9. resize: none;
  10. white-space: normal;
  11. word-break: break-all;
  12. overflow-y: hidden;
  13. max-height: 63px; /* $line-height * lines-number */
  14. line-height: 21px; /* $line-height */
  15. /* === 可自定义代码 === */
  16. padding: 0 4px;
  17. font-size: 14px;
  18. border: 1px black solid;
  19. border-radius: 4px;
  20. outline: none;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <textarea maxlength="45" rows="1" placeholder="最多请勿超过 45 字"></textarea>
  26. <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
  27. <script type="text/javascript">
  28. /* === JS 版 === */
  29. var textarea = document.getElementsByTagName('textarea')[0];
  30. textarea.addEventListener('input', function heightAdjust() {
  31. // 删除时上缩;
  32. this.style.height = 'auto';
  33. // 换行时下拉;
  34. this.style.height = this.scrollHeight + 'px';
  35. });
  36. /* === jQuery 版 ===
  37. $('textarea').on('input', function heightAdjust() {
  38. // 删除时上缩;
  39. $(this).css('height', 'auto');
  40. // 换行时下拉;
  41. $(this).css('height', $(this).prop('scrollHeight') + 'px');
  42. });
  43. */
  44. </script>
  45. </body>
  46. </html>

附:参考

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注