javascript - 具有多个动态字段的文本框或文本区域

Question

有没有办法创建一个基于网络的 <input type="text">或<textarea>它能够动态地向自身添加字段，以便用户可以通过选项卡浏览可用的 friend 并输入表单数据？

我四处搜索并找到了一个几乎可以满足我需要的终端模拟器。在下图演示中，用户输入 SCHEDL进入文本区域并按选项卡按钮。一旦按下选项卡按钮，程序就会检查命令，在本例中为 SCHEDL ，并查找与该命令关联的可用字段。然后，它用可以输入和选项卡切换的字段填充文本区域。

Answer 1

这是您正在寻找的原型(prototype)。我使用了输入标签，但可以轻松地用文本区域替换它。

无论如何，要实现这一目标；

1. 创建模型。我想到使用 JSON 对象，因为我们可以将其建模为命令和子/参数的层次结构。
2. 捕获选择输入字段时的“TAB”点击。

$(document).on('keydown', '.terminal', function(e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode == 9) {
      e.preventDefault();

      // do something if tab is clicked
    }
});

然后使用 $.each()

通过模型比较输入字段的值

如果匹配，则循环遍历 SUB 属性并将它们添加到文本框。 inputField.val(inputField.val() + ""+ v2.Name);

<小时/>

运行下面的代码片段。尝试输入 SCHEDL，然后按 TAB 键。尝试输入 TEST，然后按 TAB。

var commandJson = {
  "Commands": [{
      "Name": "SCHEDL",
      "Sub": [{
          "Name": "From:"
        },
        {
          "Name": "To:"
        }
      ]
    },
    {
      "Name": "TEST",
      "Sub": [{
          "Name": "A:"
        },
        {
          "Name": "B:"
        }
      ]
    }
  ]
};

$(document).ready(function() {
  $(document).on('keydown', '.terminal', function(e) {
    var inputField = $(this);
    var inputValue = inputField.val();
    var keyCode = e.keyCode || e.which;

    if (keyCode == 9) {
      e.preventDefault();

      // loop through the COMMANDS
      $.each(commandJson.Commands, function(k1, v1) {
        if (inputValue.toUpperCase() == v1.Name) {

          // if the command matches the input, loop through SUB and display in textbox
          $.each(v1.Sub, function(i2, v2) {
            inputField.val(inputField.val() + " " + v2.Name);
          });
        }
      });
    }
  });
});

.terminal {
  width: 100%;
  line-height: 20px;
  padding: 5px;
}

<input class="terminal" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>