jquery-InputMast overriding existing events on input field

情到浓时终转凉″ 提交于 2019-12-23 04:09:49

问题


In below code I have attached onChange() event on id "phone_world" and also applying input mask on it. Input mast is working fine but removing existing event and hello function is not getting called.

<div class="demo">
<input type="text" id="phone_world" onChange = "hello()" value="" size="25">
<label for="phone_world" id="descr_world">Страны мира</label>

<script>
  var listCountries = $.masksSort($.masksLoad("https://cdn.rawgit.com/andr-04/inputmask-multi/master/data/phone-codes.json"), ['#'], /[0-9]|#/, "mask");

  var maskOpts = {
    inputmask: {
      definitions: {
    '#': {
      validator: "[0-9]",
      cardinality: 1
    }
  },
  showMaskOnHover: false,
  autoUnmask: true,
  clearMaskOnLostFocus: false
},
  match: /[0-9]/,
  replace: '#',
  listKey: "mask"
};
var maskChangeWorld = function(maskObj, determined) {
if (determined) {
    var hint = maskObj.name_ru;
    if (maskObj.desc_ru && maskObj.desc_ru != "") {
    hint += " (" + maskObj.desc_ru + ")";
  }
  $("#descr_world").html(hint);
 } else {
    $("#descr_world").html("Страны мира");
  }
}
  $('#phone_world').inputmasks($.extend(true, {}, maskOpts, {
     list: listCountries,
     onMaskChange: maskChangeWorld
 }));
  function hello(){
   alert('hi');
  }
 </script>

回答1:


According to the jQuery input mask multi's docs, the keydown, keypress, paste, input, dragdrop, drop & blur events are interrupted, however it seems like the change event is interrupted as well (and not documented). What you can do is bind the focus and blur events to check for the change (with some help of the data() function to save the changes and compare them).

Here is a sample of the code:

$('#phone_world')
    .on('focus', function() {
        $(this).data('original-val', $(this).val())
    })
    .on('blur', function() {
        if ($(this).data('original-val') != $(this).val()) {    
            alert('value changed')
        } else {
            alert("value wasn't changed")
        }
    });

Here is a working fiddle: https://fiddle.jshell.net/5a6xo8kc/



来源:https://stackoverflow.com/questions/39315378/jquery-inputmast-overriding-existing-events-on-input-field

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!