Why does adding a decimal point to an input clear the input?

Question

I'm doing a small number keypad in Javascript, and I can't add a decimal point . to an by doing:

document.getElementById('2').onclick = () => document.getElementById('input').value += '2';
document.getElementById('.').onclick = () => document.getElementById('input').value += '.';


click to add 2
click to add .

The specified value "3." cannot be parsed, or is out of range.

But on the other hand, we can manually enter the decimal point with the keyboard when the input has focus.

Full example:

var target = document.querySelector('#input');
document.querySelectorAll('.calcbutton').forEach(el => el.addEventListener("click", evt => { target.value += evt.target.innerHTML; }));
document.querySelector('.calcpoint').onclick = evt => { if (!target.value.includes('.')) target.value += '.'; };

Why does pressing . clear the input?

user_1893976 · Answer

If a value is set (per JS), it works like the following (copy from specification)

Let oldValue be the element's value.
Set the element's value to the new value.
Set the element's dirty value flag to true.
Invoke the value sanitization algorithm, if the element's type attribute's current state defines one.
If the element's value (after applying the value sanitization algorithm) is different from oldValue, and the element has a text entry cursor position, move the text entry cursor position to the end of the text control, unselecting any selected text and resetting the selection direction to "none".

That means it is immediately checked whether it fits the pattern of a number, whereas on a user input, it waits to a later point (basically to allow the ability to add decimal points)

See https://html.spec.whatwg.org/multipage/input.html#dom-input-value-value for more information.

NICon_58186 · Answer

I suppose it's because of the number type of the input field and its sanitation (by the interpreter, see @Felix' answer).

If you want to keep using the number field, an idea to work around it may be to use a hidden text field to fill the number field (using parseFloat). Here's a snippet (text field not hidden for demo), using event delegation for the handling.

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.matches(`.calcbutton`)) {
    const value = evt.target.textContent;
    const inpNr = document.querySelector('#input');
    const inpTxt = document.querySelector('#inputTxt');
    const hasDot = /\./.test(inpTxt.value);
    // only one dot allowed
    inpTxt.value += hasDot && value === `.` ? `` : value;
    return inpNr.value = parseFloat(inpTxt.value);
  }
  
  // for demo: hide text or number field to see what it's like
  if (evt.target.matches(`[data-hidden]`)) {
    if (evt.target.dataset.hidden === `txt`) {
      document.querySelector('#input').closest(`div`).style.display = `none`;
      document.querySelector('#inputTxt').closest(`div`).style.display = ``;
      evt.target.dataset.hidden = `nr`;
      return evt.target.textContent = `Hide text field`;
    }
    
    document.querySelector('#input').closest(`div`).style.display = ``;
    document.querySelector('#inputTxt').closest(`div`).style.display = `none`;
    evt.target.dataset.hidden = `txt`;
    return evt.target.textContent = `Hide number field`;
  }
}

.calcbutton {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: bold;
}

user_19800394 · Answer

document.getElementById('2').onclick = () => document.getElementById('input').value += '2';
document.getElementById('.').onclick = () => document.getElementById('input').value += '.';


click to add 2
click to add .

Why does adding a decimal point to an input clear the input?

3 Answers