如何在动态创建的文本框中添加水印？

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

Answer 1

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>

Answer 2

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/