javascript - onblur 在 iOS 和 Mac Safari 上禁用单击(外部输入和单击其他输入)也会强制打开键盘并且不会关闭 - (Jquery)

Question

我有一个输入字段和一个货币格式化 jquery 函数，要在输入 onkeyup 和 onblur/onfocusout 上调用
data-type="currency"字段的输入 onkeyup 和 onblur/onfocusout

在 iOS 上的某些浏览器(如果不是全部)和 mac 上的 safari 中，使用 onfocusout 或 onblur 总是会禁用页面点击和键盘强制打开，并且不会关闭(通过单击输入或其他输入之外的任何位置)(检查我的浏览器小列表)已经测试过)

我尝试过 onblur 和 onfocus，但似乎都不适用于 iOS safari 和 chrome 。我也尝试像这样绑定(bind)输入。它在其他浏览器上运行良好，例如 android、windows、mac 等上的 chrome 和 Firefox。我有一个受影响的浏览器和操作系统的简短列表。

受影响/行为不当
-iOS 12
---Safari
---Chrome
---火狐
---UC浏览器(如果我尝试关闭kepad并且我可以提交表格，这个就可以工作)
注意:几乎所有 ios 上的浏览​​器和 mac 上的 safari')

-Mac
--Safari


它在
上运行良好-Android、Windows 和 Mac
---火狐
---Chrome
---IE
---边缘

我在 codepen 上重现了确切的问题 - 下面的链接

https://codepen.io/anon/pen/eaMmzb

这是我的 html 表单

<form>
<label for="price">Price</label>
<input type="text" id="price" name="price" required="required" data-type="currency" >

<br />

<label for="test">test</label>
<input type="text">
</form>

和 Jquery(版本 3.4.1)

// .format all input with data-type="currency" to currency
$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    blur: function() {
      formatCurrency($(this), "blur");
    }
});

//.format all input with data-type="currency" to currency

function formatNumber(n) {
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
} // format number 1000000 to 1,234,567

function formatCurrency(input, blur) {
  var input_currency = ""; //the currency symbol that shows beofore the amount

  var input_val = input.val();
  if (input_val === "") { return; }
  var original_len = input_val.length;
  var caret_pos = input.prop("selectionStart");
  if (input_val.indexOf(".") >= 0) {
    var decimal_pos = input_val.indexOf(".");
    var left_side = input_val.substring(0, decimal_pos);
    var right_side = input_val.substring(decimal_pos);
    left_side = formatNumber(left_side);
    right_side = formatNumber(right_side);
    if (blur === "blur") {
      right_side += "00";
    }
    right_side = right_side.substring(0, 2);
    input_val = input_currency + left_side + "." + right_side;
  } else {
    input_val = formatNumber(input_val);
    input_val = input_currency + input_val;
    if (blur === "blur") {
      input_val += ".00";
    }
  }

  input.val(input_val);
  var updated_len = input_val.length;
  caret_pos = updated_len - original_len + caret_pos;
  input[0].setSelectionRange(caret_pos, caret_pos);
}

我希望输入字段立即在 focusout 和 onkeyup 上格式化该字段。

Answer 1

您是否尝试过仅将输入值设置为模糊，而不设置选择范围？我猜后者与键盘的再次出现有关。当用户打字时，可能需要设置范围才能再次获得正确的插入符位置 - 但在模糊的情况下，一开始就不需要这样做，对吗？模糊/散焦字段后，不需要将插入符号设置到任何位置。

因此，如果您正在处理模糊事件，请不要设置选择范围:

  input.val(input_val);

  if (blur !== "blur") {
    var updated_len = input_val.length;
    caret_pos = updated_len - original_len + caret_pos;
    input[0].setSelectionRange(caret_pos, caret_pos);
  }
}