为什么 onchange 函数在 safari 中不起作用

Question

请告诉我，如果你改变了中间的字段值，那么onchange函数不起作用。如果你在末尾写上数字，那么该函数就会起作用。问题仅出现在 safari 浏览器中。可能是什么问题呢？

jQuery.fn.extend({
  phone: function() {
    var maskList = [{
        "code": "+7 ### ### ## ##",
        "country": "RU"
      },
      {
        "code": "+380 ## ### ## ##",
        "country": "UA"
      }
    ];
    var change = function(e) {
      if (e.type == 'paste') $(this).val('');

      cursor_start = $(this).prop('selectionStart');
      cursor_end = $(this).prop('selectionEnd');
      let matrix = '###############';
      if ($(this).val()[0] == '+') {
        matrix = '+##############';
      }
      maskList.forEach(item => {
        let code = item.code.replace(/[\s#]/g, ''),
          phone = $(this).val().replace(/[\s#-)(]/g, '');
        if (phone.includes(code)) {
          matrix = item.code;
        }
      });

      let i = 0,
        val = $(this).val().replace(/\D/g, '');

      value = matrix.replace(/(?!\+)./g, function(a) {
        return /[#\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? '' : a;
      });
      if (val.replace(/\D/g, '').length > value.replace(/\D/g, '').length) {
        value += val.replace(/\D/g, '').slice(value.replace(/\D/g, '').length);
      }
      $(this).val(value);

      return this;
    }

    return this.each(function() {
      $(this).on('load keyup paste', change);
      $(this).trigger('load');
    });
  }
});
$(".phone").phone();
$(".phone").on("change", function() {
  console.log("change");
})
$(".no_phone").on("change", function() {
  console.log("change");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="phone" value="+380000000000">
<input type="text" class="no_phone" value="123">

Ps 仅在 safari 中打开。

这不仅仅适用于挂有该功能的字段。其他字段通常满足 onchange。

Answer 1

当您更改输入值时，IOS 往往不会触发更改事件。

如果你更改onchange为onblur它适用于 iOS，但不适用于其他系统。我最终找到的解决办法是同时使用onblur和onchange. 看似多余，但却达到了预期的效果。

$(".phone").on("change blur", function() {
  console.log("change");
})