Firefox在input.attr上触发更改事件("类型","数字")

时间:2017-12-19 05:12:16

标签: javascript jquery firefox

我遇到问题,仅在firefox中,当输入被聚焦时,我将输入类型从"text"更改为"number",触发更改事件并且输入丢失对焦。

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

以下是我的代码:



$("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/>
&#13;
&#13;
&#13;

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

它适用于Chrome和Microsoft Edge。

先谢谢你看看这个!

1 个答案:

答案 0 :(得分:0)

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

$(function() {
    if(window.location.hash === "#someid") {
        //do something
    }
});
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();
}

我不认为这是完美的解决方案,但它现在适用于我。