Geek asks and answers

Entering a mask with a percent sign

I would like to allow the user to enter 1 or two numeric digits and display the digits followed by the percent sign. If numbers are not entered, they must be blank. The attached one almost works, but does not show a percent sign if only one digit is entered. Can anyone help? Thanks

http://jsfiddle.net/dm8Mb/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Mask</title> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js" type="text/javascript"></script>

<script> 
$(function(){$(".percent").mask("9?9%");});
</script>

</head>

<body>
<input type="text" name="percent" class="percent" value="" />
</body> 
</html>
+5
source share
1 answer

Try this - http://jsfiddle.net/dm8Mb/12/

$(function(){
    $(".percent").mask("9?9%");

    $(".percent").on("blur", function() {
        var value = $(this).val().length == 1 ? $(this).val() + '%' : $(this).val();
        $(this).val( value );
    })
});
+9
source

More articles:


All Articles