JSFiddle - React, Tailwind, and code Playground
HTML
<input id="percent" />
JavaScript
$(function(){
$("#percent").bind({
keydown: function(e) {
// custom handler for dot
var userInput = parseFloat($("#percent").val());
if(e.which == '190' || e.which == '110') {
// if entered number is integer and less than 10
if(userInput % 1 === 0 && userInput < 10) {
// prevent default mask input handlers from calling
e.preventDefault();
e.stopImmediatePropagation();
// update value
$("#percent").val('0'+userInput+'.');
// simulate paste event to refresh mask input plugin state
$("#percent").trigger('paste').trigger('input');
}
}
}
}).mask("99.99?9", {placeholder: ""});
});
/*
Masked Input plugin for jQuery
Copyright (c) 2007-2011 Josh Bush (digitalbush.com)
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
Version: 1.3
*/
(function(a){var b=(a.browser.msie?"paste":"input")+".mask",c=window.orientation!=undefined;a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},dataName:"rawMaskFn"},a.fn.extend({caret:function(a,b){if(this.length!=0){if(typeof a=="number"){b=typeof b=="number"?b:a;return this.each(function(){if(this.setSelectionRange)this.setSelectionRange(a,b);else if(this.createTextRange){var c=this.createTextRange();c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select()}})}if(this[0].setSelectionRange)a=this[0].selectionStart,b=this[0].selectionEnd;else if(document.selection&&document.selection.createRange){var c=document.selection.createRange();a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length}return{begin:a,end:b}}},unmask:function(){return this.trigger("unmask")},mask:function(d,e){if(!d&&this.length>0){var...