Edit in JSFiddle

 $(function () {
     var eventName = 'compositionend';

     $('#mask-no-timeout').on(eventName, function () {
         var $input = $(this);
         $input.val($input.val().replace(/\D/g, ''));
     });

     $('#mask-timeout').on(eventName, function () {
         var $input = $(this);
         window.setTimeout(function () {
             $input.val($input.val().replace(/\D/g, ''));
         }, 0);
     });

     $('#no-timeout').on(eventName, function () {
         $(this).val('666');
     });

     $('#timeout').on(eventName, function () {
         var $input = $(this);
         window.setTimeout(function () {
             $input.val('666');
         }, 0);
     });
 });

 <h1>Setting value on <abbr title="Input Method Editor">IME</abbr> compositionend event</h1>


<h2>Input fields below will be set to <strong>666</strong> on <code>`compositionend`</code> event.</h2>

<label> <span>Set:</span>

    <input id="no-timeout" type="text" />
</label>
<label> <span>Set (with timeout):</span>

    <input id="timeout" type="text" />
</label>
<hr>

<h2>Non-digit characters in fields below will be removed on <code>`compositionend`</code> event.</h2>

<label> <span>Remove:</span>

    <input id="mask-no-timeout" type="text" />
</label>
<label> <span>Remove (with timeout):</span>

    <input id="mask-timeout" type="text" />
</label>
<p class="notes">* Type numbers with Japanese IME 'half-width katakana' (半角カナ) mode is a good test case.</p>

body {
    line-height: 1.6;
    padding: 1em;
}
abbr {
    text-decoration: underline;
    text-decoration-style: dotted;
}
h1, strong {
    font-weight: bold;
}
h2 {
    margin: 1em 0 0.4em;
}
label {
    display: block;
    line-height: 2;
}
label span {
    min-width: 11em;
    display: inline-block;
    text-align: right;
}
.notes {
    font-size: small;
    margin-top: 2em;
}