CODEWITHSUNDEEP
jqueryjquery-plugins
user1032531
user1032531

Reputation: 26301

Mask input with percent sign

I would like to allow the user to enter 1 or two numerical digits, and display the digits followed by a percent sign. If no digits are entered, it should be blank. The attached almost works, but doesn't show the 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>

Upvotes: 4

Views: 19799

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47677

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 );
    })
});

Upvotes: 8

Related Questions