<button type="button" data-action="set">Set focus to input</button>
<button type="button" data-action="remove">Remove focus from input</button>
<br><br>
<input type="text" class="text-input" />
body {
  margin: 16px;
  line-height: 1.5;
  font-family: sans-serif;
  letter-spacing: 0.5px;
}

input {
  width: 100%;
  max-width: 320px;
  padding: 8px;
  font: inherit;
  letter-spacing: inherit;
}

button {
  display: inline-flex;
  padding: 4px;
  margin-right: 2px;
  margin-left: 2px;
}

const textInput = document.querySelector(".text-input");
const setFocusBtn = document.querySelector('[data-action="set"]');
const removeFocusBtn = document.querySelector('[data-action="remove"]');

setFocusBtn.addEventListener("click", () => {
  textInput.focus();
});

removeFocusBtn.addEventListener("click", () => {
  textInput.blur();
});

textInput.addEventListener("focus", () => {
  textInput.value = "This input has focus";
});

textInput.addEventListener("blur", () => {
  textInput.value = "";
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.