简体   繁体   中英

Apply inputMask but hide it in input

I am using this plugin InputMask as mask for my input

<input type="text" data-bind="inputMask: { value: hourValue, mask: 'h:s t\\m', jitMasking: true, showMaskOnFocus: false, showMaskOnHover: false, hourFormat: '12', alias: 'datetime'}">

I want to apply this mask to input, but never show it to user. I've added all posible properties that I've found, but still it isn't enough to hide mask at all.

Here is example : https://jsfiddle.net/sg7uvhdz/1/ Problem - when I remove last item in input, I can see first symbol of mask.

Can I hide it for every case?

Thanks.

 $(function() { $("input").inputmask(); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.min.js"></script> <input type="text" data-inputmask="'mask': 'h:st\\\\m', 'jitMasking': true, 'showMaskOnFocus': false, 'showMaskOnHover': false, 'hourFormat': '12', 'alias': 'datetime'"> 

Your best bet might be to not apply a mask on that input and then attach an event listener on blur which checks if the input is valid by calling isValid

Something like

var isValid = Inputmask.isValid("<input value>", { alias: "h:s t\\m"});

you can achieve the desired using the oncleared method.

$(function(){

    $("input").inputmask({oncleared: function() {

     $("input").val("");

  }});
})

 $(function(){ $("input").inputmask({oncleared: function() { $("input").val(""); }}); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/jquery.inputmask.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.3/inputmask/inputmask.date.extensions.min.js"></script> <input type="text" data-inputmask="'mask': 'h:st\\\\m', 'jitMasking': true, 'showMaskOnFocus': false, 'showMaskOnHover': false, 'hourFormat': '12', 'alias': 'datetime'"> 

fiddle : https://jsfiddle.net/c19f8vfm/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM