检测 textarea 元素输入并实时展示行数--源码实践

主要需求：

• textarea 文本域输入的行数展示

效果

实验Gif

内嵌 PlayGround

思路：

两个 textarea 文本域

• （行数 textarea）一个为行数显示，设置只有一列，浮动于输入框 textarea 左边
• （输入框 textarea）一个为输入框
• 同步 输入框 textarea 与 行数 textarea 的滚动高度

代码

<td width="55%">
  <div id="ol">
    <textarea cols="1" rows="10" id="index_EL" disabled></textarea>
  </div>
  <!-- prettier-ignore -->
  <textarea
    name="co"
    cols="60"
    rows="10"
    wrap="off"
    id="input_area_EL"
    onkeyup="handleKeyUp('input_area_EL')"
    onFocus="handleFocus('input_area_EL')"
    onblur="handleBlur('input_area_EL')"
    onscroll="G('index_EL').scrollTop = this.scrollTop;"
    placeholder="请输入内容"
    oncontextmenu="return false"
></textarea>
</td>

同步两个 textarea 的滚动高度

onscroll = "G('index_EL').scrollTop = this.scrollTop;";

// 附带：G函数，得到当前的ID绑定的元素
function G(objid) {
  return document.getElementById(objid);
}

获取输入框内容，计算行数，并设置行数 textarea 的内容

• 注意--textarea 输入框内容的换行判断

  windows 平台 `\r\n` 才表示会换行

  `\r：`表示回车，回到当前行的行首，而不会换到下一行，如果接着输出的话，本行以前的内容会被逐一覆盖（光标在该行的头部）

  `\r\n：`表示换行，换到当前位置的下一行（光标在下一行的头部）

function handleKeyUp(_el) {
  // \r 回车
  // \n 换行
  // \t 制表
  var obj = G(_el);

  var n = 1;
  if (obj) {
    var str = obj.value;

    /**
     * windows平台  `\r\n` 才会换行
     * \r：表示回车，回到当前行的行首，而不会换到下一行，如果接着输出的话，本行以前的内容会被逐一覆盖（光标在该行的头部）
     * \r\n：表示换行，换到当前位置的下一行（光标在下一行的头部）
     */
    str = str.replace(/\r/gi, "");
    str = str.split("\n");

    n = str.length;
  }
  line(n);
}

/**
 * 计算行数
 */
function line(n = 1) {
  var lineobj = G("index_EL");
  for (var i = 1; i <= n; i++) {
    if (document.all) {
      // 非IE
      num += i + "\r\n";
    } else {
      // 非IE
      num += i + "\n";
    }
  }
  lineobj.value = num;
  num = "";
}