JSFiddle - React, Tailwind, and code Playground

by smnh

HTML

<input id="myInput" type="text" value="" />
<div id="touchstart" class="button">focus on touchstart</div>
<div id="touchend" class="button">focus on touchend</div>
<div id="click" class="button">focus on click</div>

CSS

.button {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

JavaScript

var myInput = document.getElementById("myInput"),
    touchstart = document.getElementById("touchstart"),
    touchend = document.getElementById("touchend"),
    click = document.getElementById("click");

touchstart.addEventListener("touchstart", function(event) {
    myInput.focus();
});
touchend.addEventListener("touchend", function(event) {
    myInput.focus();
});
click.addEventListener("click", function(event) {
    myInput.focus();
});