0

I want to enable an input field when clicking on it - which works perfectly fine in chrome for example - code is super simple and works just fine in chrome. I can click anywhere in the yellow area to make this work. but in firefox, only the blue area triggers the function. What did I miss?

image:

enter image description here

let numInput = document.createElement("input");
let input_col = document.createElement("div");
numInput.disabled = true;
numInput.id = "numberInput";
input_col.addEventListener('click', function() {
  $("#numberInput").removeAttr("disabled");
  // or: numInputField.removeAttribute("disabled");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
  <label class="col-sm-3 col-form-label" for="colFormLabelSm">
      number
  </label>
</div>
<div class="col-sm-2">
  <input class="form-control form-control-sm" type="text" data-key="number" disabled="" id="numberInput">
</div>
<div class="col-sm-8" id="numberInputText">
  click to edit!
</div>
xtlc
  • 1,070
  • 1
  • 15
  • 41
  • 1
    I made you a snippet. It gives console errors. Please update the snippet to a [mcve] – mplungjan Jun 21 '21 at 12:10
  • 1
    _“What did I miss?”_ - how Firefox defines `disabled`, I would guess. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled: _“[…] makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. […] Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.”_ – CBroe Jun 21 '21 at 12:16
  • ah ... good one - how do I solve this? by overlaying it or so? – xtlc Jun 21 '21 at 12:17
  • 1
    Use readonly and grey css instead – mplungjan Jun 21 '21 at 12:34

0 Answers0