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

lnlaulya  于 2023-04-19  发布在  Java
关注(0)|答案(2)|浏览(233)

请告诉我,如果你在中间修改字段值,那么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">

P.S.仅在Safari中开放。
这不仅对挂起此函数的字段有效。其他字段通常会实现onchange。

kqhtkvqz

kqhtkvqz1#

当您更改输入值时,IOS往往不会触发更改事件。
如果你将onchange更改为onblur,它适用于iOS,但不适用于其他系统。我最终得出的解决方案是同时使用onbluronchange。似乎是多余的,但具有预期的效果。

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

cqoc49vn2#

我也遇到了同样的问题,解决方法很简单,只要打开你项目中包含的任何文件,右键点击图标,点击获取信息,然后一路向下,确保在共享和权限中,每个人都可以读写。刷新页面,你的功能就可以正常工作了

相关问题