Allow percentage and only type number input field

allow-percentage-and-only-type-number-input-field.php

<?php

add_filter('wp_footer', 'allow_percentage_and_only_type_number_input_field');
function allow_percentage_and_only_type_number_input_field(){

// Only on the product page.
if ( ! is_product() ) {
	return;
}
?>
<script>
	jQuery(function($) {
		function setInputFilter(textbox, inputFilter, errMsg) {
			["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
				textbox.addEventListener(event, function(e) {
					if (inputFilter(this.value)) {
						// Accepted value
						if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
						this.classList.remove("input-error");
							this.setCustomValidity("");
						}
						this.oldValue = this.value;
						this.oldSelectionStart = this.selectionStart;
						this.oldSelectionEnd = this.selectionEnd;
					} else if (this.hasOwnProperty("oldValue")) {
						// Rejected value - restore the previous one
						this.classList.add("input-error");
						this.setCustomValidity(errMsg);
						this.reportValidity();
						this.value = this.oldValue;
						this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
					} else {
						// Rejected value - nothing to restore
						this.value = "";
					}
				});
			});
		}
		
		setInputFilter(document.getElementById("uni_cpo_sfrido_manuale-field"), function(value) {
			return /^\d*(\.\d+)?%?$/.test(value); }, "Inserire una percentuale valida");
	});
						
	document.getElementById('uni_cpo_sfrido_manuale-field').addEventListener('input', function() {
		this.value = this.value.replace('%','')+'%'; //remove existing % and add again
	});
</script>
<?php
}