I registered account into oracle 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"
".dtd">
<html xmlns=""
xmlns:h="">
<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:mandButton 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?
I registered account into oracle. 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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"
xmlns:h="http://java.sun./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:mandButton 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?
3 Answers
Reset to default 5This 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 ponents 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 ponent library supporting this. Among them is PrimeFaces with its <p:watermark> ponent:
<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 ponent and/or a custom piece of JS/jQuery, exactly like <p:watermark> is doing under the covers.
I think they are using jquery's watermark to do that way. Attached is the firebug view of that page which shows that
In case if you have no possibility to use PrimeFaces, as @BalusC stated, you can use JavaScript/jQuery code like this:
var placeholder = "e.g. +358 (11) 123-45-67"
$("input").on({
focus: function() {
if (this.value == placeholder) {
$(this).val("").removeClass("shadow");
}
},
blur: function() {
if (this.value == "") {
$(this).val(placeholder).addClass("shadow");
}
}
}).trigger("blur");
CSS class shadow has font color: #bbb.
DEMO: http://jsfiddle/rYAbU/