Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74735

How to reset an input type=number element when the user clicks it using javascript

$
0
0

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>&times;</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:

  1. 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
  2. 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


Viewing all articles
Browse latest Browse all 74735

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>