Geek asks and answers

How to create a shadow in a JSF input field

I registered an account on oracle.com and I saw something very interesting: enter image description here

See the phone number input field on the form. How can I reproduce the same in a JSF input form? Is this done 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 does not work. Maybe I need to call JavaScript code as a function in a tag <h:inputText>?

+3
source share
3 answers

This is new with HTML5. This attribute placeholderis also known as a “watermark” prior to the HTML5 era.

<input type="text" name="phone" placeholder="e.g. +994 (12) 491 2345" />

, , , HTML5. JSF JSF, HTML5 placeholder. JSF <h:inputText> (). , . PrimeFaces <p:watermark>

<h:inputText id="phone" value="#{register.user.phone}" />  
<p:watermark for="phone" value="e.g. +994 (12) 491 2345" />

, HTML5, placeholder, JS/jQuery, . CSS.

PrimeFaces - , / JS/jQuery, , <p:watermark> .

+5

, jquery . firebug , ,

Water marking text field

+2

If you are unable to use PrimeFaces, as @BalusC stated , you can use JavaScript / jQuery code as follows:

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");​

The CSS class shadowhas a font ​color: #bbb.

DEMO: http://jsfiddle.net/rYAbU/

+2
source

More articles:


All Articles