Categories
JavaScript Answers

How to make a HTML5 datalist visible when focus event fires on input with JavaScript?

Spread the love

Sometimes, we want to make a HTML5 datalist visible when focus event fires on input with JavaScript.

In this article, we’ll look at how to make a HTML5 datalist visible when focus event fires on input with JavaScript.

How to make a HTML5 datalist visible when focus event fires on input with JavaScript?

To make a HTML5 datalist visible when focus event fires on input with JavaScript, we can save the old input value on mouse move. On mouse down, we can empty the input value. And on mouse up, we set the input value to the saved input value.

For instance, we write:

<input name="input" list="input" />

<datalist id="input">
  <option value="apple" selected></option>
  <option value="orange"></option>
  <option value="grape"></option>
</datalist>

to add an input and datalist associated with the input.

Then we write:

const input = document.querySelector('input')
let old;
input.onmousemove = (e) => {
  e.target.focus()
  old = e.target.value
}

input.onmousedown = (e) => {
  e.target.value = ''
}

input.onmouseup = (e) => {
  e.target.value = old
}

to select the input and define the old variable to store the old value.

The we focus on the input and save the old value on mouse move with:

input.onmousemove = (e) => {
  e.target.focus()
  old = e.target.value
}

Then on mouse down, we empty the input value with:

input.onmousedown = (e) => {
  e.target.value = ''
}

Then on mouse up, we set the input value to the saved old value with:

input.onmouseup = (e) => {
  e.target.value = old
}

Conclusion

To make a HTML5 datalist visible when focus event fires on input with JavaScript, we can save the old input value on mouse move. On mouse down, we can empty the input value. And on mouse up, we set the input value to the saved input value.

One reply on “How to make a HTML5 datalist visible when focus event fires on input with JavaScript?”

It seems this doesn’t work with modern browsers. There’s no way to programmatically show the datalist options menu with JavaScript.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.