如何防止光标跳转到固定列文本区域中的下一行答案

【问题标题】：How to prevent cursor jump to next line in fixed column textarea如何防止光标跳转到固定列文本区域中的下一行
【发布时间】：2019-10-30 13:42:20
【问题描述】：

我有一个带有以下 HTML 的文本区域...

 <textarea id="inputFreeContentArea" cols="16" rows="6" maxlength="96" wrap="hard"></textarea>

当用户输入文本时，我希望光标在一行输入 16 个字符时停止移动，它不应该自动移动到下一行，只有当用户按下回车键时。此外，不应超过 6 行。

如何做到这一点？

【问题讨论】：

为什么不堆积六个input type=text 元素来看起来像一个textarea ..？
@Teemu-callmewhateveryouwant 我认为当按下回车键时光标不会跳转到下一个输入字段。此外，我宁愿不收集来自 6 个不同字段的输入。
添加一个事件监听器，它检测到 ENTER，并专注于下一个输入。用于 ENTER 检测和输入收集的代码比尝试更改 textarea 元素的本机行为要简单得多。
Here's a demo 为您服务。我认为将值收集到隐藏输入是微不足道的。
@Teemu-callmewhateveryouwant 感谢演示，它已经接近我想要的了。对于用户体验来说，如果使用箭头键会改变行，那将是很棒的，但我相信这也可以由事件侦听器完成。我认为会有一个更简单的解决方案，代码更少（例如，只需设置一个 textarea 属性），但如果没有，你的答案已经很好了。

标签： javascript html textarea

【解决方案1】：

没有一种简单的方法可以实现您想要的，这需要大量的代码和输入检查。相反，您可以使用包装器和六个 input 元素，对它们进行一些样式设置，然后将值收集到隐藏的输入 ex。实时或在表单验证器中。像这样的：

function createTxtarea(parent, cols) {
  // Set the cols of the "textarea"
  const inputs = parent.querySelectorAll('input');
  inputs.forEach(input => input.setAttribute('maxlength', cols));
  // Add listener for Enter and ArrowUp/down keys
  const focusTo = {
    Enter: (e) => e.target.nextElementSibling,
    ArrowDown(e) {return this.Enter(e);},
    ArrowUp: (e) => e.target.previousElementSibling
  };
  parent.addEventListener('keydown', (e) => {
    const key = e.key;
    if (typeof focusTo[key] === 'function') {
      e.preventDefault();
      const prext = focusTo[key](e);
      if (prext) prext.focus();
    }
    // Collect the value here if needed
  });
}

createTxtarea(document.getElementById('area1'), 16);

.txtarea {
  border: 1px solid #ccc;
  padding: 1px;
  display: inline-block;
}
.txtarea input {
  border: none;
  display: block;
}

<form>
  <div id="area1" class="txtarea">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
    <input type="text" name="area1[]">
  </div>
</form>

使用[] 为输入名称添加后缀可以使它们在后端以数组形式提供，这样您也可以轻松地从服务器的输入中提取单个值。

您可以改进基本代码。可以轻松创建多个“txtareas”，并且可以根据需要将代码转换为OOP，并且可以动态创建输入甚至父元素。

代码在手机中被忽略，但填写“txtarea”仍然流畅。如果您在 HTML 中添加了maxlength 属性，如果关闭了 JS，“txtarea”将比自定义的真实 textarea 元素更流畅。

【讨论】：