input, i ♥️ you, but you're bringing me down

input, i ♥️ you, but you're bringing me down

Browsers have had an <input> element since the dawn of time, and yet any time you talk to web developers about it, everyone complains about it. It's unpredictable. It's grumpy. It's got reaaaaally strong opinions about style, and it doesn't want to listen to yours. I'm going to tell you a story about how grew up to be the moody adult it is, and why it's maybe time we stood up to it.

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

June 16, 2016
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.

    type=date not working properly empty input is invalid regardless of

    minlength type=number doesn’t work with pattern type=number can type eee without firing event weird caret offset with type=search typing moves cursor to the end
  4. 14.
  5. 18.
  6. 19.
  7. 20.
  8. 22.
  9. 23.
  10. 24.
  11. 25.
  12. 37.
  13. 38.
  14. 39.
  15. 46.
  16. 47.

    input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }
  17. 48.

    input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }
  18. 49.

    input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }
  19. 50.

    input[type=range] { … } // Webkit ::-webkit-slider-thumb { … }

    ::-webkit-slider-runnable-track { … } // FF ::-moz-range-thumb { … } ::-moz-range-track { … } // Never stop being different, IE <3 ::-ms-thumb { … } ::-ms-track { … } ::-ms-fill-lower { … } ::-ms-fill-upper { … }
  20. 51.
  21. 52.
  22. 62.
  23. 63.
  24. 64.
  25. 72.
  26. 73.
  27. 82.
  28. 83.
  29. 84.
  30. 95.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);
  31. 96.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);
  32. 97.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);
  33. 98.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput);
  34. 99.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); createdCallback() { this._value = null; }
  35. 100.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }
  36. 101.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }
  37. 102.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }
  38. 103.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attachedCallback() { this._input = document.createElement('input'); this._input = 'text'; this._input = this._value; this.createShadowRoot().appendChild(this._input); this._input.addEventListener(‘keypress’, _restrict); this._input.addEventListener(‘input’, _onInput); }
  39. 104.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); getValue() { return this._value; }
  40. 105.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); setValue(v) { this._input.value = this._value = this._fix(v); } getValue() { return this._value; }
  41. 106.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); _fix(value) { if (!value) return null; if (awfulRegex.test(value)) return Number(value); return NaN; }
  42. 107.

    class NumberInput extends HTMLElement { constructor() {…} createdCallback() {…} attachedCallback()

    {…} attributeChanged(which, oldV, newV) {} getValue() {…} setValue(v) {…} } document.registerElement(‘number-input’, NumberInput); attributeChangedCallback(which, oldV, newV) { if (which == 'value') { this._input.value = newV; } }
  43. 108.