1

Minimal example

let input = document.createElement("input");
input.id = "input";   
input.type = "number";
input.className = "number-input";
input.disabled = true;     
document.body.appendChild(input);
.number-input:focus {
  background: yellow;
}
.number-input {             
  -moz-appearance: textfield;     
} 
<button onClick="document.getElementById('input').disabled = false">
Enable
</button>

<button onClick="document.getElementById('input').disabled = true">
Disable
</button>

The created input is semi-disabled on start, i. e. you can click on it and it turns yellow (gets focus), but you can't write a number into it. However after clicking Enable followed by Disable button, it is as disabled as expected. It seems to be a bug that involves the input.type = "number" and the browser specific -moz-appearance: textfield, that I use to hide the up and down buttons.

Any ideas how to really disable the input field, when the page is loaded?

Albjenow
  • 369
  • 2
  • 12

2 Answers2

2

Adding input[disabled] {pointer-events:none} to the CSS seems to fix this. Not sure why Firefox still allows initial focus like that.

However, this CSS fix will only work in browsers that support pointer-events property. There is poor IE support (only 11). There's also a user-select property that may work (haven't tested it) but that still allows the input's data to be submitted in a form, and again may be restricted based on browser support.

A third (likely non-recommended) option would be to (when disabled) have an element in-front of the input to catch the clicks, but that's a pretty messy way to solve it.

Another possibility: when disabling, you could have your JS also apply different property/value for .number-input:focus

let input = document.createElement("input");
input.id = "input";   
input.type = "number";
input.className = "number-input";
document.body.appendChild(input);
input.disabled = true;
.number-input:focus {
  background: yellow;
}
.number-input {             
  -moz-appearance: textfield;     
} 

input[disabled] {pointer-events:none}
<button onClick="document.getElementById('input').disabled = false">
Enable
</button>

<button onClick="document.getElementById('input').disabled = true">
Disable
</button>
B. Scott
  • 166
  • 1
  • 5
  • 1
    I only asked for Mozilla and this works as expected. I can't test for IE but in Chrome it, i. e. hiding the spin-buttons, works with the answer found [here](https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box). – Albjenow Dec 05 '17 at 13:10
1

In Firefox it helps me to set disabled as input.disabled. Don't ask me why :-)

let input = document.createElement("input");
input.id = "input";   
input.type = "number";
input.className = "number-input";
input.disabled; // here instead of input.disabled = true     
document.body.appendChild(input);
.number-input:focus {
  background: yellow;
}
.number-input {             
  -moz-appearance: textfield;     
} 
<button onClick="document.getElementById('input').disabled = false">
Enable
</button>

<button onClick="document.getElementById('input').disabled = true">
Disable
</button>
pavel
  • 26,538
  • 10
  • 45
  • 61
  • @andi: it seems to be the same, but in my Firefox/Mac it worked. I didn't know why, it looks strange, but worked. It was the reason why I posted it here. I my post I wrote, that it worked for me but didn't know why. – pavel Dec 05 '17 at 07:25
  • I'm using Firefox 56 on Mac, and it doesn't work. Which version are you using? – andi Dec 05 '17 at 14:19
  • @andi: not using, but have installed 47.0.1 on Mac. But as I wrote, it had no reason to working, just a speciality. Now I've updated to 56.0.2 and still works for me... Strange, since I wrote my answer. – pavel Dec 05 '17 at 17:40