Question

我的页面中有更多的文本框控件，当文本为null时，CSS或类应该更改，当有一些文本时，我需要更改当前的CSS或类。我没有得到如何做到这一点的逻辑。我的设计代码是这样的：

 <asp:TextBox ID="txtFirstName" runat="server" CssClass="field" Width="150px"></asp:TextBox>
 <asp:TextBox ID="txtLastName" runat="server" CssClass="field" Width="150px"></asp:TextBox>
 <asp:TextBox ID="txtemail" runat="server" CssClass="field" Width="150px"></asp:TextBox>
 <asp:TextBox ID="txtpassword" runat="server" CssClass="field" Width="150px"></asp:TextBox>
 <asp:TextBox ID="txtconfirmpassword" runat="server" CssClass="field" Width="150px"></asp:TextBox>

Answer 1

$('#element').keypress(function() {
    if ($(this).val() == '') {
        $(this).removeClass('myClass');
    } else {
        $(this).addClass('myClass');
    }
});

Answer 2

类似的东西：

$('#myInput').keyup(function() {
    if ($(this).val()) {
        $(this).removeClass('empty-class');
        $(this).addClass('full-class');
    } else {
        $(this).removeClass('full-class');
        $(this).addClass('empty-class');
    }
});

http://jsfiddle.net/z4TQY/1/

的工作示例

我假设你想要两个不同的类，而不是一个被添加或删除的类。

顺便说一下，这是keyup而不是keypress，因为后者在之前触发，文本框的内容会被该按键更改。

此外，为了更一致的行为，请对.change()注册相同的函数，以便您的类可以镜像任何不是由键事件引起的更改。

Answer 3

使用类似的东西（我现在无法测试）：

$("#textboxid").change(function(){ 
  if($(this).val() != ''){
    $(this).addClass('cssclass');
  } else {
    $(this).removeClass('cssclass');
  }
});

希望它有所帮助。

如何根据文本框值更改类名

3 个答案: