Emulate tab and enter key using vanilla JavaScript

Question

I have a situation where I need to focus on input/textarea/contenteditable elements. Then set the values programmatically. After that I need to emulate tab or enter programmatically so that entered text can look like tags as show in below picture.

can anybody suggest how can this be achieved?

Just like below demo, I have a input field. I have added blur for the demonstration purpose but I want tab or enter events to be fired. I know that blur will do the trick but I dont want that.

Demo: http://jsfiddle.net/2np1cwe6/ Vanilla JS code: 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);

Does this answer your question? [How to trigger event in JavaScript?](https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) Also relevant: [MDN page about triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) — DBS, Nov 05 '20 at 15:57
Why do you have to emulate keystrokes, instead of e.g. `element.focus()`? — OrangeDog, Nov 05 '20 at 15:57
Can you post a [Minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? — Technoh, Nov 05 '20 at 15:57
How does using tab and enter cause "*entered text to look like tags*"? Are you using some tag input component there? — Bergi, Nov 05 '20 at 15:58
@stafan Since you're obviously using jQuery and a jQuery plugin (library), why are you asking for a vanilla js solution? Certainly that plugin offers methods to do exactly what you want. — Bergi, Nov 05 '20 at 16:19
@stafan Please include a link to the library (and its documentation) that you are using for the `.tagInput()` — Bergi, Nov 05 '20 at 16:20
I gave an example buddy. Look here if you want vanilla JS http://jsfiddle.net/dyc4bLta/ — stafan, Nov 05 '20 at 16:20

score 0 · Answer 1 · answered Nov 05 '20 at 16:13

Manipulate the following as per your need. This will recognize a tag/word when you enter a comma.

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

please see my question. I have added the link to the code. – stafan Nov 05 '20 at 16:14 — stafan, Nov 05 '20 at 16:14

score 0 · Answer 2 · answered Nov 05 '20 at 16:20

0

You can pass the characters that act as confirmation to the tagsinput function using the confirmKeys array key. Something like this:

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

answered Nov 05 '20 at 16:20

Technoh

1,606
15
34

Sorry. That was just an example. What I really want is in Vanilla JS – stafan Nov 05 '20 at 16:21
I can't help you if you give me a wrong [Minimum, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Give me your real code and I can help you then. – Technoh Nov 05 '20 at 16:22
I have added the link. Please check. Eventhough it does not have input tags thingy (as it takes time for me build that), I have just added simple example. BTW thank you for your help. :) – stafan Nov 05 '20 at 16:24
Alright, I suggest you build everything until you are stuck. In short, you need to bind to the `keydown` event for the input box and check if the character code is equal to one of the characters you want to use to terminate input and add the tag. – Technoh Nov 05 '20 at 16:27

Emulate tab and enter key using vanilla JavaScript

2 Answers2