改变文本框的颜色答案

【问题标题】：chaging the color of textbox改变文本框的颜色
【发布时间】：2015-03-05 04:54:30
【问题描述】：

我正在尝试使用 jquery 验证注册表单。出错时，我希望文本框颜色变为红色。但是当用户开始在文本框中书写时，颜色应该从红色更改为默认值。我可以在出错时将颜色更改为红色。但是当用户再次开始在文本框中书写时，颜色仍然是红色。这是我尝试过的示例代码。

<script type="text/javascript">
$(document).ready(function () {
$('#signup_form').validate({ // initialize the plugin
    rules: {
        firstName: {
            required: true,
           },

        mobile: {
               required:true,
               number: true,
               minlength:10 
        },
},
messages: {
        firstName: "Enter Name",
        mobile: {
            required: "Enter Mobile No",
            number:"Enter valid mobile no",
            minlength: "Enter 10 digit mobile no"
         },
  },
 errorPlacement: function(error, element) {

         if (element.attr("name") == "firstName") {
            $('#firstName').css('border-color', 'red');
         $("#fname").html(error);
        }
        if (element.attr("name") == "mobile") {
            $('#phone').css('border-color', 'red');
            $("#mobile").html(error);
           }
 },
      errorElement : "i"
   });
 });
</script>

【问题讨论】：

你可以使用 jquery 事件 'keyup' 或 'pointerdown' ..

标签： jquery css jsp textbox

【解决方案1】：

$('#TextBox').keyup(function(){
    $(this).css('color', '#fff');
})

keyup 事件应该处理它

【讨论】：

【解决方案2】：

您可以使用 highlight、unhighlight 和 onkeyup 方法，例如

$(document).ready(function () {
    $('#signup_form').validate({ // initialize the plugin
        rules: {
            firstName: {
                required: true,
            },
            mobile: {
                required: true,
                number: true,
                minlength: 10
            },
        },
        messages: {
            firstName: "Enter Name",
            mobile: {
                required: "Enter Mobile No",
                number: "Enter valid mobile no",
                minlength: "Enter 10 digit mobile no"
            },
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") == "firstName") {
                $("#fname").html(error);
            }
            if (element.attr("name") == "mobile") {
                $("#mobile").html(error);
            }
        },
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
            }
            $(element).css('border-color', 'red');
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
            }
            $(element).css('border-color', '');
        },
        onkeyup: function( element, event ) {
            if ( event.which === 9 && this.elementValue(element) === "" ) {
                return;
            } else if ( element.name in this.submitted || element === this.lastElement ) {
                this.element(element);
            }
            $(element).css('border-color', '');
        },
        errorElement: "i"
    });
});

演示：Fiddle

【讨论】：