Question

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

Black lines separating each line

我需要想办法让这些文字框感觉像一个巨大的文本区域。

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

有没有人知道我可以做到的任何工作或方法？

我基本上需要制作一个人们可以输入的框，看起来就像图片一样，但人们只能在蓝色区域中输入和编辑。文本＆＃34;人们将键入的标签。＆＃34;不能更改，编辑，删除等。

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

我认为使用许多textareas或输入字段是错误的方法。

下面你会发现尝试通过在开头添加空格来满足缩进（如果它不存在）。它还增加了一个＆lt; ul＆gt;。元素与许多＆lt; li＆gt;允许您在行下面有行的元素。如果textarea填充了太多文本，它也会滚动背景。

在Chrome30，FF25和IE10中进行测试，旨在作为概念验证。如果你要实现这个，你应该动态添加尽可能多的＆lt; li＆gt;你需要的元素。事件应该正确绑定。

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>

说明：

创建一个div，其位置为：relative，用于设置子元素位置的引用。
创建一个位置为绝对的ul，其中包含尽可能多的li元素。标签进入第一个标签，其他标签具有不间断的空间以允许样式化。
当我按下一个按下一个函数的键时，如果textarea的值以一定数量的空格开始，则调用regexp，如果它们缺失则添加它们。
如果滚动了textarea，则会调用另一个也会滚动背景的函数。

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

组合多个文本输入框

3 个答案: