javascriptjqueryhtmljquery-inputmask

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:s t\\m', 'jitMasking': true, 'showMaskOnFocus': false, 'showMaskOnHover': false, 'hourFormat': '12', 'alias': 'datetime'">


Solution

  • 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:s t\\m', 'jitMasking': true, 'showMaskOnFocus': false, 'showMaskOnHover': false, 'hourFormat': '12', 'alias': 'datetime'">

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