onblur отключает щелчки (внешний ввод и нажатие другого входа) на iOS и Mac Safari также принудительно открывает клавиатуру, и она не закрывается - (Jquery)

Question

У меня есть поле ввода и функция jquery для форматирования валюты, которая вызывается при вводе onkeyup и onblur / onfocusout изполе с data-type = "currency"

Использование onfocusout или onblur всегда отключает щелчки на странице и принудительное открытие и закрытие клавиатуры (путем нажатия в любом месте за пределами ввода или другого ввода) в некоторых браузерах на iOS, если не всеи safari на Mac (проверьте мой маленький список для браузеров, которые я тестировал)

Я пробовал и onblur, и onfocus, и ни один из них не работает на iOS Safari и Chrome.Я также пытался привязать ввод, как это.Он отлично работает в других браузерах, таких как Chrome и Firefox на Android, Windows, Mac и т. Д. У меня есть короткий список браузеров и операционной системы.

ЗАТЕРЯНЕНО / НЕПРАВИЛЬНО-iOS 12---Сафари---Хром---Fire Fox--- Браузер UC (этот работает, если я пытаюсь закрыть kepad и могу заполнить форму)примечание: почти все браузеры на ios и safari на mac ')

-Mac--СафариОНО РАБОТАЕТ-Андроид, Windows и Mac---Fire Fox---Хром--- 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);
}

Я ожидаю, что поле ввода отформатирует поле немедленно при фокусировке и включении.

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);
  }
}