使用 vanilla JavaScript 模拟选项卡并输入密钥答案

【问题标题】：Emulate tab and enter key using vanilla JavaScript使用 vanilla JavaScript 模拟选项卡并输入密钥
【发布时间】：2020-11-05 15:55:29
【问题描述】：

我有一种情况需要关注输入/文本区域/内容可编辑元素。然后以编程方式设置值。之后，我需要模拟选项卡或以编程方式输入，以便输入的文本看起来像下图所示的标签。

有人可以建议如何实现吗？

就像下面的演示一样，我有一个输入字段。我为演示目的添加了模糊，但我希望触发选项卡或输入事件。我知道模糊可以解决问题，但我不想那样做。

演示：http://jsfiddle.net/2np1cwe6/ 原版JS代码：http://jsfiddle.net/dyc4bLta/

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  },
  freeInput: true
});
$('input').on('itemAdded', function(event) {
    setTimeout(function(){
        $(">input[type=text]",".bootstrap-tagsinput").val("");
    }, 1);
});

var i = $('input');
setTimeout(function() {
  i.focus()
    i.val('adfasdfasd');
}, 2000);

setTimeout(function() {
  i.blur()
}, 8000);

【问题讨论】：

这能回答你的问题吗？ How to trigger event in JavaScript? 也相关：MDN page about triggering events
为什么你必须模拟击键，而不是例如element.focus()?
你能发一个Minimal, reproducible example吗？
使用制表符和输入如何导致“输入的文本看起来像标签”？你在那里使用一些标签输入组件吗？
添加了代码@Technoh。请检查

标签： javascript dom-events enter

【解决方案1】：

根据您的需要操作以下内容。这将在您输入逗号时识别标签/单词。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <textarea id="text"></textarea>
  <div id="tags">
  </div>
  <script>
    let text = document.querySelector("#text");
    let tags = []
    text.addEventListener("keyup", (e)=>{
      if(text.value[text.value.length-1]==',')
        {
          tags.push(text.value.substr(0, text.value.length-1));
          text.value = "";
          let out = "";
          tags.forEach(tag=>{
            out += tag + " ";
          });
          document.getElementById("tags").innerHTML=out;
        }
    });
  </script>
</body>
</html>

【讨论】：

请看我的问题。我已经添加了代码的链接。

【解决方案2】：

您可以使用confirmKeys 数组键将用作确认的字符传递给tagsinput 函数。像这样的：

$('input').tagsinput({
    // Your other configuration array keys here,
    confirmKeys: [8, 13, 32, 44] // 8 = tab, 13 = enter, 32 = space and 44 = ,
});

【讨论】：

对不起。那只是一个例子。我真正想要的是 Vanilla JS
如果你给我打错了Minimum, reproducible example，我帮不了你。把你的真实代码给我，我可以帮你。
我已添加链接。请检查。尽管它没有输入标签（因为我构建它需要时间），但我只是添加了简单的示例。顺便说一句，感谢您的帮助。 :)
好吧，我建议你构建一切，直到你被卡住。简而言之，您需要为输入框绑定keydown事件，并检查字符代码是否等于您要用于终止输入并添加标签的字符之一。