input[type=number] should allow its value to be set to the empty string, but not all browsers (Webkit) allow that behavior

[chadoh]

According to the spec, "When an input element's type attribute is in the Number state, ...User agents should allow the user to set the value to the empty string." However, I just tried this out in Chrome 10 and that isn't supported. The value I just deleted pops back in.

You may want to look into putting in a check for this. I'd find it useful, but it's not a big deal. Sorry I don't have time to help out with it!

[paulirish]

here's a testcase of that issue by alex sexton:
http://jsbin.com/eyuxu4/6/edit

it's a webkit bug. empty value should be allowed as a value as long as the required attribute isnt set.

[SlexAxton]

Here's a slightly modified one:
http://jsbin.com/eyuxu4/9

I was adding the object in the wrong place and duping a test. They both work, but this one should be better.

Just include it right after modernizr.

The only way to clear the input seems to be to grab it's ids and classes, completely destroy the element, and then recreate another in its place with the same id and classes.

Alternatively, this issue only seems to arise when the value is set in the html initially (as in, the element was parsed with a value in the value attribute). Another option would be to potentially set a data- attribute of the values when you output the html, and then have javascript set the value on all inputs.

<input type=number value=5 />

would turn into

<input type=number data-futureval=5 />
...
<script>
// with jQuery... for ease of example
$('input[type=number][data-futureval]').each(function(){ 
  var t = $(this); 
  t.val(t.attr('data-futureval'));
});
</script>

Since those values would have been set dynamically, they should still be reset-able.

All to say... this probably doesn't belong in Modernizr proper, since it mostly supports number and all this code would be bloat for the majority, but it really should get fixed in webkit.

[chadoh]

This goes far beyond was I was thinking, anyhow. I was just thinking that modernizr should allow me to check to see if clearing a number field is supported. Nothing more. Right now I added a workaround to my site, but I'd like to only add the workaround if it's necessary.

[SlexAxton]

The additional script in the jsbin link does exactly what you said there: check to see if clearing a number field is supported.

The other stuff on what to do when you find out that it's not was just some helpful stuff that I picked up along the way. Feel free to ignore it.

Here's the patch to add support for testing a cleared number, in case you're not a fan of jsbin:

// Feature test for input type=number support
// Alex Sexton
(function(w, d, undef) {
  var cont = d.createElement('div'),
      ret = {number: false, allowsEmptyReset: false},
      inp1;

  // Set it up with innerHTML since the issue occurs with elements that start with a value
  cont.innerHTML = '<input type="number" value="1" id="in1" />';

  // Get out the input element
  inp1 = cont.childNodes[0];

  // Try to reset the value of the node
  inp1.value = '';
  if (!inp1.value) {
    ret.allowsEmptyReset = true;
  }

  // Set the output to modernizr input object.
  // Can't use addTest because it belongs in this object
  if (w.Modernizr) {
    ret.number = w.Modernizr.inputtypes.number;
    w.Modernizr.inputtypes.number = ret;
  }
})(this, this.document);

This would put an object in Modernizr.inputtypes.number with two values in it. It doesn't do anything else.

Best of luck.

[MissAnichka]

We came across this issue as well so would like to leave a comment in case others out there are having the same issue as well. Try setting the value of the element to undefined! It worked for us:
function clearInput(e, type) { e.preventDefault() let url = document.getElementById(settings-${type}list-section-form-url); let hrs = document.getElementById(settings-${type}list-section-form-hrs); let mins = document.getElementById(settings-${type}list-section-form-mins); url.value = ""; url.placeholder = "google.com"; hrs.value = undefined; mins.value = undefined; }

(the hrs and mins elements are html inputs that are of type=number)