有没有办法创建一个基于网络的 <input type="text">
或<textarea>
它能够动态地向自身添加字段,以便用户可以通过选项卡浏览可用的 friend 并输入表单数据?
我四处搜索并找到了一个几乎可以满足我需要的终端模拟器。在下图演示中,用户输入 SCHEDL
进入文本区域并按选项卡按钮。一旦按下选项卡按钮,程序就会检查命令,在本例中为 SCHEDL
,并查找与该命令关联的可用字段。然后,它用可以输入和选项卡切换的字段填充文本区域。
最佳答案
这是您正在寻找的原型(prototype)。我使用了输入标签,但可以轻松地用文本区域替换它。
无论如何,要实现这一目标;
- 创建模型。我想到使用 JSON 对象,因为我们可以将其建模为 命令和子/参数的层次结构。
- 捕获选择输入字段时的“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>
关于javascript - 具有多个动态字段的文本框或文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58815640/