Question

如果文本框为空，我想使用事件更改文本框的边框颜色。

JS

$(document).ready(function () {
    $("#name1").onFocus(function () {
        if ($("#name1").val() == "") $(this).css({
            "border": "red",
        });
        $("#name1").LostFocus(function () {
            if ($("#name1").val() != "") $(this).css({
                "border": "",
            });
        });
    });
});

HTML

<form action="">
    <input id="name1" type="textbox"></input>
    <input id="name2" type="textbox"></input>
    <input id="name3" type="textbox"></input>
    <input type="button" value="submit"></input>
</form>

Answer 1

使用模糊

尝试此操作

 $("input[type='textbox']").blur(function () {
    var text = $(this).val();
    if(text == "")
    {
        $(this).css('border-color','red');
    }
    });

小提琴：http://jsfiddle.net/aCz7E/

Answer 2

试试这个，

查看实时DEMO

<强> HTML

<form action=""> 
    <input id ="name1" type="textbox"></input>
    <input id ="name2" type="textbox"></input>
    <input id ="name3" type="textbox"></input>
    <input type="button" value="submit"></input>
</form>

<强> CSS

.red {
     border-color:red;   
}

<强>的jQuery

$(document).ready(function() {
    $("input").focusin(function(){
        if ($(this).val() == "")
        $(this).addClass("red")
    });
    $("input").focusout(function(){
        if ($(this).val() != "")
        $(this).removeClass("red")
    });
});

Answer 3

尝试focus代替onFocus并使用blur代替LostFocus。

$(document).ready(function() {
$("#name1").focus(function(){
if ($("#name1").val() == "")
$(this).css({
"border": "red",
});

$("#name1").blur(function(){

if ($("#name1").val() != "")
$(this).css({
"border": "",
});


});
});

了解详情：http://api.jquery.com/focus/和http://api.jquery.com/blur/

Answer 4

使用自定义onChange处理程序： FIDDLE

$(function () {
    $("#name1").on("change", function () {
        if($(this).val()==""){
            $(this).css({
                "border":"2px solid red"
            });
        }
        else{
            $(this).css({
                "border":""
            });
        }
    });
});

当文本框为空时如何更改文本框的边框颜色丢失焦点事件和onfocus事件如果文本不为空则则不要更改边框颜色

4 个答案: