textBox ontextChanged在用户添加文本时不触发

Question

I am creating a textBox within a repeater like this ( so there are many textboxes created inside a loop and added to the repeater control)

.aspx.cs

 TextBox textBox = new TextBox();
 textBox.TextChanged += new EventHandler(textBox_TextChanged);

and I have a function like this for changing the textBox background color to white if that textbox has some text(it is yellow on creation of the form)

protected void textBox_TextChanged(object sender, EventArgs e)
{
    TextBox textBox = sender as TextBox;
    if (textBox.Text != String.Empty)
    {
        textBox.BackColor = System.Drawing.Color.White;
    }
}

but the function doesn't seem to be hit at all. Any pointers on what I am doing wrong?

Thanks.

Answer 1

I would suggest to save the round trip to the server and do it with javascript. When you create your control in the code behind add the onchange client event attribute and handle it:

myTextBox.Attributes.Add("onchange", 
       "this.style.backgroundColor = (this.value != '')?'#fff':'yellow';");

Hope it helps!

Answer 2

Sample java Script

<script type="text/javascript" language="javascript">
    function runScript(evt, ID) {
        var ctl = document.getElementById(ID.id);
        if (ctl.value == '') {
            ctl.style.backgroundColor = '#FFFF00';
        }
        else
            ctl.style.backgroundColor = '#FFFFFF';

        return true;
    }
</script>

---

Sample Repeater Control HTML

<asp:Repeater ID="rpt" runat="server">
    <HeaderTemplate>
        <table>
            <tr>
                <td>
                    textBox
                </td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:TextBox ID="ed" runat="server" BackColor="Yellow" onkeyUp="return runScript(event, this)" autocomplete="off"></asp:TextBox>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

Answer 3

Thank you guys for the help. This is the final code I used .aspx.cs.

textBox.Attributes.Add("onkeypress","javascript:changebackgroundcolor()");

.aspx

<script type="text/javascript">
        function changebackgroundcolor() {
            var element;
            for (var i = 0; i < document.forms[0].elements.length; i++) {
                element = document.forms[0].elements[i];

                switch (element.type) {
                    case 'textarea':
                        if (element.value.length > 0) {
                            element.style.borderwidth = "thin";
                            element.style.bordercolor = "White";
                            element.style.borderstyle = "solid";
                        }
                        break;
                }
            }
        }
</script>