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

Question

我有一个包含以下内容的文本区域 HTML...

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

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

如何做到这一点？

Answer 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" 仍然流畅。如果您将 maxlength 属性添加到 HTML，如果关闭 JS，"txtarea" 将比自定义的真实文本区域元素更流畅。

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

How to prevent cursor jump to next line in fixed column textarea

html

javascript

textarea