0

動的に追加されるテキストボックスの総数を取得するWebページがあります。テキストボックスを配置するための行とセルを追加する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);
4

2 に答える 2

1

Ajaxツールキットを介して動的に作成されたテキストボックスにその場で何かを接続する方法があるかどうかはわかりませんが、それを行う「オープン」な方法は、JavaScriptを使用して各テキストボックスに透かしを添付することです。（移植性/再利用性のために使用しているバックエンドフレームワークからUI機能を分離することは一般的に良い習慣であるため、「オープン」と言います。）

これがjQueryの方法です。

これがバニラJavaScriptの方法です

各テキストボックスの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-11T19:05:17.010 に答える
1

試す ：

        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-11T19:27:17.743 に答える