How to add '%' symbol in textbox using jsf and jsp?

Question

I am new to jsp and jsf. I want to insert '%' symbol in textbox. But I am not able to insert % symbol in textbox using jsp and jsf.

My jsf code is :

<h:inputText class="form-control input-sm input-element"
                                    id="oligoName" name="name" maxlength="30" placeholder="" />

My jsp code is :

<input type="text" class="form-control input-sm input-element"
    id="Name" maxlength="30" name="name" placeholder="">

I have a html code for the same. Based on that only I gave class.

All other symbols can be inserted in textbox. Issue is only with '%' symbol.

Can someone please help me out?

Answer 1

I found out the issue. As @Himanshu Bhardwaj @DavidS told, the issue was with the javascript. There was an event 'keypress', which suppressed us from entring '%'. I unbind that event as :

$('#Name').unbind('keypress');

Thank you all

Answer 2

There are several approaches for achieving this.

1. Initialize the backing input variable with "%". It's an ugly solution, that involves manual value validation and keeping appearing/ignoring the symbol.
2. Set the symbol with Javascript manually. Almost the same as above but on client side level.
3. Use a JSF AJAX extension like Primefaces and Primefaces Extensions. The last one in particular has inputNumber element that supports prefixes and suffixes (http://www.primefaces.org/showcase-ext/sections/inputNumber/basicUsage.jsf). Alternatively the original Primefaces provides inputMask element that does essentially the same but in a more generic way (http://www.primefaces.org/showcase/ui/input/inputMask.xhtml).
4. The solution I personally prefer. Show the "%" symbol after the inputText as text leaving the input field empty to do what it's supposed to. This can be done using simple DIVs and CSS formatting.