jquery-InputMast overriding existing events on input field

Question

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>

Can you add a working snippet of the same, with all the js dependency. May be you need to add some callback function of inputmask such as onKeyDown or onKeyValidation. Check the documentation here. — n4m31ess_c0d3r
– n4m31ess_c0d3r, Commented Sep 4, 2016 at 9:39
fiddle.jshell.net/kp183q11/light Check this fiddle link. Here we just need to add onClick = "Hello" on id="phone_world" and Hello function. — Kalashir
– Kalashir, Commented Sep 4, 2016 at 9:42
@aManHasNoName Can we add two functions at a time inside inputMask options ? I am trying to add onKeyValidation() but it is only executing onMaskChange() — Kalashir
– Kalashir, Commented Sep 4, 2016 at 9:47

Dekel · Accepted Answer · 2016-09-04 11:39:11Z

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/

answered Sep 4, 2016 at 11:39

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dekel Over a year ago

@Kalashir, you are welcome :) a voteup will be appreciated as well. Thanks!

Collectives™ on Stack Overflow

jquery-InputMast overriding existing events on input field

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related