Making HTML5 datalist visible when focus event fires on input

Related searches

As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose since the user is presented with a list of options and the value is recorded in an input text field.

The limitation here is the list does not appear until the user start typing something in the text field and even then is only shown possible matches based on their input. The behavior I want is that as soon as there is focus on the field the entire list of options become visible.

So I have this code - view on jsbin

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
  <input list="categories">
  <datalist id="categories">
    <option value="Breakfast">Breakfast</option>
    <option value="Brunch">Brunch</option>
    <option value="Lunch">Lunch</option>
    <option value="Dinner">Dinner</option>
    <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

and I'm trying to get that to show with this Javascript:

    var catVal = document.getElementsByTagName("input")[0],
    cat = document.getElementById("categories");

    catVal.style.fontSize = "1.3em";

    catVal.addEventListener("focus", function(event){
     cat.style.display = "block";
    }, false);

Any help would be appreciated,

Cheers

I use the following code:

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>

mouseover: Set focus and memorize old value in a -- g l o b a l -- variable

mousedown: Delete value and show datalist (built in functionality)

mouseup: Restore old value

Then select new value.

Find this an acceptable workaround towards a combobox.

Making HTML5 datalist visible when focus event fires on input, As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve� Making HTML5 datalist visible when focus event fires on input Question As some might know already styling select element is a nightmare, literally impossible without some javascript trickery.

I hope you like this solution:

I added a "temp" attribute to the input field for storage and once the mouse hovers over the input filed it will save its current value in temp and then delete the value so as to allow the datalist to open.

On mouseout it will restore the field’s value from the variable temp. This solution works great under Chromium that I tested.

As a bonus you can add a placeholder="Click to see all your options"

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;">
<datalist id="myDatalist" open="open"> 
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist>

Making HTML5 datalist visible when focus event fires on input, Making HTML5 datalist visible when focus event fires on input. 由匿名(未验证) 提交于2019-12-03 02:49:01. 可以将文章内容翻译成中文,广告屏蔽插件可能会导致� The onfocusout event occurs when an element is about to lose focus. Tip: The onfocusout event is similar to the onblur event. The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child loses focus, you should use the onfocusout event.

Question is pretty old, but it's top search on google and there are no answers to be found so I'll add it here.

To expand datalist on first click you need to set

dataListElement.style.display = "block";

and immediately hide it in next line, so it does not appear as element in your DOM, but it will only expand it under input element.

dataListElement.style.display = "none";

As of today it's not expanded on first click only in Firefox.

When HTML is not enough: a tale of the <datalist> element, Autocomplete with HTML 5: the <datalist> tag� box with links/buttons, throw in some more logic around the focus and blur events, and call it a day. Options are displayed in the same order as in the <datalist> tag in the source, this list was But choosing something from the list fires the usual input event. The onfocus event occurs when an element gets focus. The onfocus event is most often used with <input>, <select>, and <a>. Tip: The onfocus event is the opposite of the onblur event. Tip: The onfocus event is similar to the onfocusin event. The main difference is that the onfocus event does not bubble.

HTML:

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   <meta charset=utf-8 />
   <title>Input - Datalist</title>
</head>
<body>

  <input list="categories" id="categories2" type="text">
  <div id="result"></div>
  <datalist id="categories">
     <option value="Breakfast">Breakfast</option>
     <option value="Brunch">Brunch</option>
     <option value="Lunch">Lunch</option>
     <option value="Dinner">Dinner</option>
     <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

jQuery:

var result='';
$(document).ready(function(){  
   $('input[type=text]').focus(function(){
      $('#categories option').each(function(){
      result=result+" "+$(this).val();
      });

      $('#result').show().html(result);
      $('input[type=text]').unbind('focus');
   });
   $('input[type=text]').blur(function(){
       $('#result').hide();  
       $('input[type=text]').focus(function(){
           $('#result').show();
       });

   });  
});

Working JS bin

http://jsbin.com/urupit/4/watch

SCR19: Using an onchange event on a select element without , Success Criterion 3.2.2 (On Input) that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus. There is an onchange event associated with the continent select. The XHTML code to create the select elements in the body of the Web page. The code you tested in Fiddle is connected to the input event. The code you gave me is connected to the change event. As I have mentioned earlier, non of them fires when the user selects an option. But if there is no events connected to the datalist options, I suppose the only solution is to add a button to the page and use its click event.

click event not firing with Html5 datalist, In one of my partial views, I have the datalist shown below. I also have a Jquery with the following handler (only showing the But not having any event firing, if the user clicks directly on an option, doesn't make any sense. I've tried your code, but the event does not fire until the input-field loose focus. The <datalist> tag can be used in conjunction with an <input> tag that contains a list of selectable data as a drop-down list of input values that contains only legal values. DataList is not visible to the user, but it is associated with the <input> tag through the <input> tag list attribute that takes as its value the id attribute value of the

For <input> elements with type=checkbox or type=radio, the input event should fire whenever a user toggles the control, per the HTML5 specification. However, historically this has not always been the case. Check compatibility, or use the change event instead for elements of these types.

The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data. The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).

Comments
  • I'm trying to achieve the same, did you have any luck so far?
  • how does this do what the OP asked for?
  • Is any of jquery code needed at all. I think datalist and input with list association shall be enough to do the needed(in chrome) or is there any browser compatibility issue here i am missing ?
  • I feel like the spec should have another INPUT attribute that directs the browser to supply this behavior or something. From a usability standpoint, the list/datalist spec is lacking in my opinion. Your solution is a clean, simple workaround! Thanks!
  • When the dropdown is open in your example and I scroll the page, the drop down is scrolled down as well (with chromium). Never saw this behaviour before with datalist.
  • good thinking but that is not the behavior I'm after, for our UX we do not want to create a holder div since we will have at least 3 of these inputs side by side. I want the datalist to show when the input get the focus event.
  • Why not double click the input type text? it will show the whole list.
  • as the developer I know that's what I need to do to get to that, but it's not obvious to the user who most likely is used to click once in an input box and start typing, reason why I'm trying to trigger the second click as soon as they focus
  • They will only know to double click if they are told, otherwise it is not obvioius