javascript - Firefox 在 input.attr ("type"、 "number"上触发更改事件

Question

我遇到了一个问题，仅在 Firefox 中，当输入获得焦点时，我将输入类型从 "text" 更改为 "number"，触发更改事件并且输入失去焦点。

我想要实现的是将输入更改为焦点上的数字字段，允许编辑，并在模糊时将输入更改为LocaleString()。

这是我的代码:

$("input").focusin(function() {
  $(this).val(toNumber($(this).val()));
  $(this).attr("type", "number");
});

$("input").focusout(function() {
  $(this).attr("type", "text");
  $(this).val("$ " + toCost($(this).val()));
});

// Added during edit to make code testable
$('input').on('change', function(){ console.log('changed'); })

function parseNumber(value) {
  var result = parseFloat(toNumber(value));
  if (!isNaN(result)) {
    return result;
  }
  return 0;
}

function toNumber(str) {
  return str.replace(/\s/g, "").replace(/\$/g, "").replace(/,/g, "");
}

function toCost(number) {
  return parseNumber(number).toLocaleString();
}

<!-- Added during edit to make code testable -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input/>

我不明白为什么在 Firefox 中输入会触发更改事件并在选择它时失去焦点。当我尝试在控制台上使用 $("#myInput").focusin() 时，它会按照我想要的方式工作。

它在 Chrome 和 Microsoft Edge 上运行良好。

预先感谢您查看此内容!

Answer 1

我目前正在使用此作为解决方案:

function is_firefox() {
    return navigator.userAgent.search("Firefox") >= 0;
}

$("input").focusin(onFocusIn);

$("input").focusout(onFocusOut);

$('input').change(onInputChange);

function onFocusIn() {
  $(this).val(toNumber($(this).val()));
  $(this).attr("type", "number");

  // remove on 'change' and 'focusout', and add back after a short delay
  if (is_firefox()) {
    $(this).off("change");
    $(this).off("focusout");
    setTimeout(function(element){
      element.change(onInputChange);
      element.focusout(onFocusOut);
    }, 15, $(this));
  }
}

function onFocusOut() {
  $(this).attr("type", "text");
  $(this).val("$ " + toCost($(this).val()));
}

function onInputChange() {
  console.log("changed");
}

$("input").focusout();
    
function parseNumber(value) {
  var result = parseFloat(toNumber(value));
  if (!isNaN(result)) {
    return result;
  }
  return 0;
}

function toNumber(str) {
  return str.replace(/\s/g, "").replace(/\$/g, "").replace(/,/g, "");
}

function toCost(number) {
  return parseNumber(number).toLocaleString();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input value="1000"/>

我认为这不是完美的解决方案，但它现在对我有用。