Placeholder in Struts2 textfield using javascript

Question

Good day!

I am trying to create a placeholder on my Struts2 Textfield. The problem is, there is no built-in attribute for it. So i've decided to use javascript. But I don't know how I can effect it on the struts text field.

Code for html textfield placeholder in javascript is as follow:

HTML: <input type="text" name="billingNameStreet" class="input" title="Street"/>

   <script type="text/javascript">
        $(':input[title]').each(function() {
            var $this = $(this);
            if($this.val() === '') {
                $this.val($this.attr('title'));
            }
            $this.focus(function() {
                if($this.val() === $this.attr('title')) {
                    $this.val('');
                }
            });
            $this.blur(function() {
                 if($this.val() === '') {
                     $this.val($this.attr('title'));
                 }
            });
        });
    </script> 

How can i effect it on my struts2 textfield:

<s:textfield label="TEST" name="test" cssClass="haha"/>
<s:textfield label="TEST1" name="test1" cssClass="haha1"/>
<s:textfield label="TEST2" name="test2" cssClass="haha2"/>

Or is there other way to create a placeholder in Struts2 textfield?

Thanks in advance

Answer 1

Here your jQuery code says that the selector is input elements with title attribute. In your struts2 tags, the title is not specified. In <s:textfield/> tag, you can use the title attribute which will be rendered to html title attribute. Hence, your code would need to be changed to something like:

<s:textfield label="TEST" name="test" cssClass="haha" title="haha"/>
<s:textfield label="TEST1" name="test1" cssClass="haha1" title="haha1"/>
<s:textfield label="TEST2" name="test2" cssClass="haha2" title="haha2"/>

You can use this document for future references:

http://struts.apache.org/2.0.14/docs/textfield.html