How to add watermark to dynamically created text boxes?

Question

I have a web page where I get a count of total Text box to be added dynamically. I have added a HTML table to which I add rows and cells to place the text box.

I do not wish to add label controls for each text box but wish to place watermark text inside each text box which are dynamically created as an array of text boxes.

Please help me to achieve this. Any code will be much better!

Below code is what I have written which only created text box inside the HTML table control.

//Add row to table
tRow = new TableRow();
tblBokingDet.Rows.Add(tRow);

//Add cell to row
tCell = new TableCell();
tRow.Cells.Add(tCell);

//Add a literal text as control
AddTextBox = new TextBox();
AddTextBox.ID = "txtName" + i;                    
tCell.Controls.Add(AddTextBox);

Took me about 10 seconds to find this: http://www.ozzu.com/javascript-tutorials/tutorial-watermark-text-boxes-html-javascript-jquery-t106384.html. I used [this search](https://www.google.com/search?q=text+boxes+with+watermark). — Robert Harvey, Dec 11 '12 at 18:53
@Robert.. I already have my code to create dynamic. I am expecting to continue further on it and achieve this. Jave script approach would be my last alternative. Thank you ! :) — codebug, Dec 11 '12 at 20:00

score 1 · Answer 1 · edited May 23 '17 at 11:55

I don't know if there's a way to wire up something via the Ajax toolkit to dynamically created textboxes on the fly, but an "open" way of doing it would be to use JavaScript to attach watermarks to each of your text boxes. (I say "open" because its generally good practice to separate your UI functionality from whatever backend framework you're using for portability/reuseability.)

Here's the jQuery way.

Here's the vanilla javascript way

You're hooking into the onfocus() and onblur() events of each textbox. Of course, you'll need to create a js function generic enough to iterate through each of your textboxes and wire up their events.

Sample (for single textbox):

<input id="MyTextBox" type="text" value="Search" />

<script>
    var MyTextBox = document.getElementById("MyTextBox");

    MyTextBox.addEventListener("focus", function(){
        if (this.value=='Search') this.value = '';
    }, false);

    MyTextBox.addEventListener("blur", function(){
        if (this.value=='') this.value = 'Search';
    }, false);
</script>

@ajax81... thanks for your help! Will take your code in my future references. — codebug, Dec 11 '12 at 20:06

score 1 · Accepted Answer · answered Dec 11 '12 at 19:27

1

Try :

        AddTextBox = new TextBox();
        AddTextBox.ID = "txtName" + i;                    
        tCell.Controls.Add(AddTextBox); // add to the cell
        AddTextBox.Attributes.Add("class", "hintTextbox");
        AddTextBox.Attributes.Add("onfocus", "if (this.value=='Name') this.value = '';this.style.color = '#000';");
        AddTextBox.Attributes.Add("onblur", "if (this.value=='') {this.value = 'Name';this.style.color ='#888';}");

Add the CSS:

         INPUT.hintTextbox       { color: #888; }
         INPUT.hintTextboxActive { color: #000; }

See sample fiddle here : http://jsfiddle.net/F5R6Z/3/

answered Dec 11 '12 at 19:27

Anujith

9,370
6
33
48

Hi A.V., this works good, but the watermark does not show up by default. Once I click on textbox and then click outside, the watermark appears. Then on wards, it is all perfect, i.e. goes off once i click inside text box and appears once I click outside. How can I get the watermark appear even before I click on the text box ? – codebug Dec 11 '12 at 19:56
Hi A.V.. achieved it by adding one line ! AddTextBox.Text = "Name"; Thanks a lot! – codebug Dec 11 '12 at 20:04

How to add watermark to dynamically created text boxes?

2 Answers2