jQuery input mask with two different user inputs

Question

I'm trying to create an input mask, which collects two different values from the user. In the end the input mask should look like this:

[X.XXX$ for X years]

Where the X is an input by the user. Ist that possible? I've tried by using the jQuery Plugin inputmask and the code above:

 $(document).ready(function(){
   $('.query').inputmask({
       mask: '9.999$ for 9?9 years',
       placeholder: '1.000$ for 2 years'
   });
});

The input mask doesn't work like I expected. It mixes the placeholder with the input values, what doesn't make sense to me. Can anybody help me with that issue?

Thanks a lot!

Answer 1

I see you're using this inputmask

The mask is getting into a funky state because there are some out-of-the-box definitions for y and a, which are being interpreted since they aren't being escaped. If you want to look at all the other default definitions, then open up your debugger and take a look at $.inputmask.defaults.definitions, or just take a look at the script.

You can escape a definition in the mask by using \\

update your script to the following and you should be good to go.

Here's a link to a fiddle if you want to experiment with it.

$('.query').inputmask({
   mask: '9.999$ for 9 \\ye\\ar',
   placeholder: 'X'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<input class='query' type='text' />