How to create shadow in JSF input field


Tags: java,javascript,css,jsf,jsf-2

Problem :

I registered account into oracle.com web site and I saw something very interesting: enter image description here

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?



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.


    CSS Howto..

    How to create overlaying papers (pile) - CSS / HTML

    How to make this kind of border css? [closed]

    How to pull images out of WordPress content?

    How to create a two vertically stacked buttons next to a text input

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    css + thymeleaf - How to auto-adjust displayed screen size?

    How to choose fontstacks

    How to apply css, after Jquery adds a class?

    How can I Highlight links only in Blog Posts with Mouseover?

    CSS: How to eliminate border for a particular row/column in the table

    How to style the arrow that opens submenus in jQuery mmenu?

    How to include a css class that is an image on codeigniter form submit?

    How do i apply fadein and fadeout effect for this?

    How to make accessible h1 with logo

    How to make a round mask over a image

    How to remove property from a child element?

    How can I achieve a jQuery onhover effect like WordPress post list's edit links?

    How to find the css class of an anchor link inside a cross domain iFrame?

    How to hide and show a
    onclick when there's already an action for click?

    How can I make a div element float left after another float left while still filling the rest of the parent's width?

    How to make gradual colour change when hover with CSS?

    how to i target a another div with jquery or css

    How to “clear” a CSS fake table row?

    how to trigger “onMouseOut” from click

    How to add materialize css to an angularjs project?

    How to stop a CSS rule from applying to a specific element [duplicate]

    how to move css element with scrolling left with Jquery?

    How to create a floating div with jQuery

    How do I use “:nth-of-type” to select an element after the element is updated by jQuery?

    How to create nested diamond shape using CSS?