合并多个文本输入框

Question

所以我有 3 个文本输入区域。这样做的原因是因为我需要一条黑线分隔每一行文本。

我需要想办法让这些文本框看起来像是一个巨大的文本区域。

即- 当您键入时，它会在没有剩余空间时移至下一行，当您删除文本时，它会在需要时将其推回上一行。

有没有人知道我可以实现这一目标的任何变通方法或方法？

---

我基本上需要做一个人们可以输入的框，看起来和图片一模一样，但是人们只能在蓝色区域输入和编辑。文本“人们将键入的内容的标签”。不能更改、编辑、删除等。

Answer 1

你可以像这样使用纯javascript：

<script type="text/javascript">
function ValidatePassKey(tb) {
  if (tb.TextLength >= 4)
    document.getElementById(tb.id + 1).focus();
  }
  if (tb.TextLength == 0 & tb.id !== 1){
       document.getElementById(tb.id - 1).focus();
  }
}
</script>

<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">

这只是在您当前所在的文本框已满时将光标移动到下一个文本框。

Answer 2

如果您只为线条使用 3 个 texbox，而不是那样，为什么不使用带有背景图像的 textarea？

看看这个：jsfiddle.net/felipemiosso/Rh82q/

更新：jsfiddle.net/felipemiosso/Rh82q/4/

Answer 3

我认为使用许多文本区域或输入字段是错误的做法。

您可以在下面找到满足缩进的尝试，如果不存在则在开头添加空格。它还添加了一个带有许多

元素的

元素，以允许您在行下方有线条。如果 textarea 中的文本过多，它也会滚动背景。

在 Chrome30、FF25 和 IE10 中进行了测试，旨在作为概念验证。如果你要实现这个，你可能应该根据需要动态添加尽可能多的

• 元素。并且事件应该被正确绑定。

  jsfiddle

  <!doctype html>
  <html>
    <head>
      <style>
        div.mytext {
          position:relative;
          overflow:hidden;
          width:400px;
          height:200px;
        }
        div.mytext > ul {
          position:absolute;
          top:5px;
          left:2px;
          font-weight:bold;
          color:#f00;
          list-style:none;
          width:100%;
          padding:0;
          margin:0;
          z-index:0;
        }
  
        div.mytext >ul> li {
          border-bottom:1px solid #000;
          width:100%;
          height:19px;
        }
  
        div.mytext > ul,
        div.mytext > textarea {
          font-size:12px;
          line-height:20px;
          font-family:courier;
          height:100%;
          width:100%;
          overflow:hidden;
          max-width:100%;
          max-height:100%;
          -moz-box-sizing: border-box;
           box-sizing: border-box;
        }
  
        div.mytext > textarea {
          position:relative;
          background:transparent;
        }
  
      </style>
      <script>
        function update(area) {
          if (!area.value.match(/^[ ]{8}/)) {
            area.value = '        ' +  area.value.replace(/^\s+/,"");
          }
          if (area.selectionStart < 8) {
            area.selectionStart = 8;
          }
        }
  
        function scroll(area) {
          area.parentElement.firstElementChild.scrollTop = area.scrollTop;
        }
      </script>
    </head>
    <body>
      <div class='mytext'>
        <ul>
            <li>Label:</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
            <li>&nbsp;</li>
        </ul>
        <textarea onkeydown='update(this)' onscroll='scroll(this)'></textarea>
      </div>
    </body>
  </html>
  

  解释：

  • 创建一个具有 position:relative 的 div 以设置子元素位置的引用。
  • 创建一个具有 position:absolute 的 ul，其中包含尽可能多的 li 元素。标签进入第一个标签，其他标签有一个不间断的空间以允许进行样式设置。
  • 当我按下一个键时，将调用一个函数，该函数使用正则表达式测试 textarea 的值是否以一定数量的空格开头，如果缺少则添加它们。
  • 如果滚动文本区域，则会调用另一个函数来滚动背景。

  免责声明：这只是一个概念证明，如果要用于生产，还需要做更多的工作。