jQuery-InputMast覆盖输入字段上的现有事件 [英] jquery-InputMast overriding existing events on input field

问题描述

在下面的代码中，我在ID"phone_world"上附加了onChange()事件，并在其上应用了输入掩码. 输入桅杆工作正常，但未调用现有事件和hello函数.

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>

推荐答案

根据jQuery输入掩码multi的 docs ，keydown, keypress, paste, input, dragdrop, drop & blur事件被中断，但是change事件似乎也被中断(并且没有记录).您可以做的是绑定focus和blur事件以检查更改(在data()函数的帮助下可以保存更改并进行比较).

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).

以下是代码示例:

$('#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")
        }
    });

这是一个有用的小提琴: https://fiddle.jshell.net/5a6xo8kc/

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

这篇关于jQuery-InputMast覆盖输入字段上的现有事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！