0

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

分隔每条线的黑线

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

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

有谁知道我可以实现这一目标的任何解决方法或方法？

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

4

3 回答 3

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">

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

于 2013-11-07T15:38:23.967 回答
0

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

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

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

于 2013-11-07T15:52:52.317 回答
0

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

您可以在下面找到满足缩进的尝试，如果不存在则在开头添加空格。它还添加了一个带有许多 <li> 元素的 <ul> 元素，以允许您在行下方有线条。如果 textarea 中的文本过多，它也会滚动背景。

在 Chrome30、FF25 和 IE10 中进行了测试，旨在作为概念验证。如果你要实现这个，你可能应该根据需要动态添加尽可能多的 <li> 元素。并且事件应该被正确绑定。

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 的值是否以一定数量的空格开头，如果缺少则添加它们。
  • 如果 textarea 被滚动，另一个函数被调用，该函数也将滚动背景。

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

于 2013-11-07T16:26:57.753 回答