javascript - Why onchange function not working in safari - Stack Overflow

admin管理员组

文章数量:1307661

Please tell me, if you change the field value in the middle, then the onchange function does not work. If you write numbers at the end, then the function works. The problem is only in the safari browser. What could be the problem?

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=".3.1/jquery.min.js"></script>
<input type="text" class="phone" value="+380000000000">
<input type="text" class="no_phone" value="123">

Please tell me, if you change the field value in the middle, then the onchange function does not work. If you write numbers at the end, then the function works. The problem is only in the safari browser. What could be the problem?

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./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 Only open in safari.

This does not work only for the field on which this function is hung. Other field normally fulfills onchange.

• javascript
• safari

Share Improve this question Follow edited Apr 25, 2022 at 16:46 Vans asked Apr 25, 2022 at 16:40 VansVans 36022 silver badges1111 bronze badges 4

• 1 Does this answer your question? javascript file input onchange not working [ios safari only] – Charlo Poitras Commented Apr 25, 2022 at 16:42
• @CharloPoitras This does not work only for the field on which this function is hung. Other field normally fulfills onchange. – Vans Commented Apr 25, 2022 at 16:47
• JavaScript setting the value does not trigger events. – epascarello Commented Apr 25, 2022 at 17:02
• I'm using permissions API and the same thing happens with microphone query onchange. Mac Safari ignores it while in Chrome it works nice and smooth. – TheNightwalker Commented Oct 22, 2022 at 19:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

IOS tends to not fire change events when you change the value of their inputs.

If you change onchange to onblur it works for iOS but not others. The fix I eventually came to was to use BOTH onblur and onchange. Seems redundant but has the desired effect.

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

I had the exact same problem, the solve is just as easy as going to whatever file is included in your project, right click on the icon, click on get info go all the way down and make sure that in sharing and permission everyone is allowed to both write and read. the refresh the page and your feature will wok

You can just set a condition when page load in iphone and when page laod in other os.

if(navigator.userAgent.match(/iPhone/i))
{
      $(".no_phone").on("blur", function() {
         alert("changed");
      })
}
else{
      $(".no_phone").on("change", function() {
         alert("changed");
      })
});

本文标签： javascriptWhy onchange function not working in safariStack Overflow