如何將水印添加到動態創建的文本框？

我有一個網頁，我得到了一個動態添加的文本框的總數。我添加了一個HTML表格，我添加了行和單元格來放置文本框。如何將水印添加到動態創建的文本框？

我不想爲每個文本框添加標籤控件，但希望在每個文本框內放置水印文本，這些文本框是作爲文本框的數組動態創建的。

請幫我實現這一點。任何代碼都會好得多！

下面的代碼是我寫的，它只在HTML表格控件中創建了文本框。

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

來源

2012-12-11 codebug

任何代碼都要好得多?? ...什麼哈你試過.... –

花了我10秒鐘找到這個：http://www.ozzu.com/javascript-tutorials/tutorial-watermark-text-boxes-html-javascript-jquery-t106384.html。我使用[此搜索]（https://www.google.com/search?q=text+boxes+with+watermark）。 –

你需要JavaScript至少讓它更容易 – Anujith

嘗試：

 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';}");

添加CSS：

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

在這裏看到樣品小提琴：http://jsfiddle.net/F5R6Z/3/

來源

2012-12-11 19:27:17 Anujith

嗨A.V.，這工作很好，但水印默認情況下不顯示。一旦我點擊文本框，然後在外面點擊，就會出現水印。然後在病房，這是完美的，即一旦我點擊裏面的文本框，並出現一次，我點擊外面時熄滅。即使在點擊文本框之前，我怎樣才能獲得水印？ – codebug

嗨A.V ..通過添加一行來實現它！ AddTextBox.Text =「Name」; 非常感謝！ – codebug

我不知道是否有通過Ajax toolkit要連接東西的方式來動態創建在運行文本框，但這樣做的一個「開放」的方法是使用JavaScript水印附加到每個你的文本框。（我說「開放」是因爲它通常將您的UI功能與您用於可移植性/可重用性的任何後端框架分開的良好實踐）。

這裏的vanilla javascript way

你鉤住的onfocus（），並且每個文本框的的onblur（）事件。當然，你需要創建一個通用的js函數來遍歷每個文本框並連接它們的事件。

（單文本框）樣品：

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

來源

2012-12-11 19:05:17

@ ajax81 ...感謝您的幫助！將在我未來的參考中使用你的代碼。 – codebug

如何將水印添加到動態創建的文本框？

回答

相關問題