How to create shadow in JSF input field
css, java, javascript, jsf, jsf-2
Solution
This is new since HTML5. It's the `placeholder` attribute, which is also known as "watermark" before the HTML5 era.
<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />
This works of course only in browsers supporting HTML5. When using JSF, this works only with JSF components supporting the new HTML5 `placeholder` attribute. The standard JSF `<h:inputText>` doesn't support this natively (yet). You'd need to look for a 3rd party component library supporting this. Among them is PrimeFaces with its `<p:watermark>` component:
<h:inputText id="phone" value="#{register.user.phone}" />
<p:watermark for="phone" value="e.g. +994 (12) 491 2345" />
This will check if HTML5 is supported and then use `placeholder`, otherwise it will bring in some JS/jQuery magic to simulate the same. Nothing of this all is done by CSS.
If using PrimeFaces is not an option for some reason, you'd need to reinvent it yourself in flavor of a custom component and/or a custom piece of JS/jQuery, exactly like `<p:watermark>` is doing under the covers.
Problem
I registered account into oracle.com web site and I saw something very interesting: See the input field of the telephone number into the form. How I can reproduce the same into JSF input form? Is this made by CSS? CODE UPDATE ``` <?xml version="1.0" encoding="UTF-8"?> <!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" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <script type="text/javascript"> <!-- input field shadow --> var placeholder = "test field" $("input").on({ focus: function() { if (this.value == placeholder) { $(this).val("").removeClass("shadow"); } }, blur: function() { if (this.value == "") { $(this).val(placeholder).addClass("shadow"); } } }).trigger("blur"); </script> </h:head> <h:body> <h1>JSF 2 textbox example with shadow</h1> <h:form> <h:inputText value="#{userBean.userName}" /> <h:commandButton value="Submit" action="user" /> </h:form> </h:body> </html> ``` I tested this code but it's not working. Maybe I need to call the JavaScript code as function into the `<h:inputText>` tag?