Display watermark on af:inputText in ADF 11g using javscript

Sometimes we would like to display the watermark on the af:inputText component in oracle ADF and remove the text on mouse click or focus on that input text. We can achieve this using the Java script code as below. The snapshot of look and feel is also added.

Look and Feel Snapshot

  Step1: Add the following code to the application javascript file

<af:resource type="javascript">
    function adf$noValueText$intialize(event) {
        var component = event.getSource();
        component.visitChildren(adf$noValueText$replaceEmptyWithText, null, false);
    }
   
    function adf$noValueText$onFocus(event) {
        adf$noValueText$replaceTextWithEmpty(event.getSource());
    }
   
    function adf$noValueText$onBlur(event) {
        adf$noValueText$replaceEmptyWithText(event.getSource());
    }
   
    function adf$noValueText$replaceTextWithEmpty(component) {
        var noValueText = component.getProperty("noValueText");
        if (typeof noValueText != 'undefined') {
            var domNode = document.getElementById(component.getClientId() + "::content");
            if (domNode.value == component.getProperty("noValueText")) {
                domNode.value = "";
            }
        }
    }
   
    function adf$noValueText$replaceEmptyWithText(component) {
        var noValueText = component.getProperty("noValueText");
        if (typeof noValueText != 'undefined') {
            var domNode = document.getElementById(component.getClientId() + "::content");
            if (domNode.value == "") {
                domNode.value = component.getProperty("noValueText");
            }
        }
    }
</af:resource>


Step2: Add the following code to your jsff

<af:clientListener method="adf$noValueText$intialize" type="load">

<af:inputText label="" value="WaterMark" id="it" />
       <af:clientAttribute name="noValueText" value="WaterMark Text"/>
       <af:clientListener method="adf$noValueText$onFocus" type="focus"/>
       <af:clientListener method="adf$noValueText$onBlur" type="blur"/>
</af:inputText>