I'm experimenting with the <input type="number" ...>
list option to create a numeric input field that displays a set of predefined 'favorite' values, but still allow other values to be typed in by the user.
Here is what I have, so far:
<style>
button.times {
position: relative;
top: 11px;
outline: none;
padding: 0;
height: 20px;
width: 20px;
}
button.times > div {
position: relative;
top: -6px;
font-size: 26px;
}</style><div><p><span class="h">Input #6</span><br /><b><u>with</u> an inline reset inline code segment and clear button</b></p><label>
Zoom(%)<input type="number" id="input6" min="50" step="50" list="favorites"
title="Please enter or choose a zoom value."
onclick="this.value = '';"/><button class="times" onclick="clearButton( this );"><div>×</div></button><script>
function clearButton( This ) {
var input = This.parentElement.querySelector( 'input' );
input.value = '';
input.focus();
}</script><datalist id="favorites"><option value="50" /><option value="100" /><option value="150" /><option value="200" /><option value="250" /><option value="300" /></datalist></label><br /><span id="span6"></span><!-- valid/invalid field value message area --></div><script>
var inputs = document.querySelectorAll( 'input[type="number"]' );
for( var i = 0, l = inputs.length; i < l; ++i )
inputs[ i ]
.addEventListener( 'change',
function() {
var element = this
.parentElement
.parentElement;
if( element.tagName != 'DIV' )
element = element.parentElement;
element = element
.querySelectorAll( 'span' )[ 1 ];
if( element.tagName === 'SPAN' )
element.innerHTML = ( this.checkValidity()
? 'valid'
: 'invalid!' );
} );</script>
Problems:
There were two major problems:
- Fixed After the first time selecting/entering a value and exiting the field, the next time the field has the focus, the drop-down list only shows some of options that sort of match the current input value, and
- Added work-around The input element may be cleared by erasing the field value, clicking the clear button, or clicking the field to display the full list of options.
Here is a CodePen examples showing my test case and others.
Thanks