Javascript 如何使用 jquery 设置 texbox 的边框颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3245265/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:50:48  来源:igfitidea点击:

how to set border color of a texbox using jquery

javascriptjquerycss

提问by Shantanu Gupta

How to set a default border color of a control using jquery.

如何使用 jquery 设置控件的默认边框颜色。

       if (_userName.val().trim() == "") {
            errMsg += "\nUserName is a mandatory field.";
            _userName.css('border-color', 'red');
        }
        else {
            _userName.css('border-color', 'red');//Set border-color as loaded 
//when page was loaded
        }

How to Set border-color as loaded when page was loaded.

如何在加载页面时将边框颜色设置为已加载。

回答by Sarfraz

Get the border color at page load and store in a variable:

获取页面加载时的边框颜色并存储在变量中:

$(function(){
  var color = _userName.css('border-color');
});

And then you can use it later:

然后你可以稍后使用它:

 if (_userName.val().trim() == "") {
        errMsg += "\nUserName is a mandatory field.";
        _userName.css('border-color', color);
    }
    else {
        _userName.css('border-color', color);
    }

Also make sure that there is a border at least eg border:1px solid #colorcode

还要确保至少有一个边界,例如 border:1px solid #colorcode

回答by Veera

I would suggest creating a new style class called errorand applying it on the textbox when the field contains error. Code snippet:

我建议创建一个名为error的新样式类,并在该字段包含错误时将其应用于文本框。代码片段:

CSS: .error{border-color:#F00;}

CSS: .error{border-color:#F00;}

        if (_userName.val().trim() == "") {
            errMsg += "\nUserName is a mandatory field.";
            $("#textboxid").addClass("error");
        }
        else {
            _userName.css('border-color', 'red');//Set border-color as loaded 
            $("#textboxid").removeClass("error");
        }

Advantage: If the field does not have any error, we can just remove the error class and the textbox look and feel will return to the original style. No need to track the original border color explicitly. And the style rule is re-usable too! ;-)

优点:如果字段没有任何错误,我们只需删除错误类,文本框的外观就会恢复到原来的样式。无需明确跟踪原始边框颜色。而且样式规则也可以重复使用!;-)

回答by Aamir Mahmood

To set the color on page load you can do the following.

要在页面加载时设置颜色,您可以执行以下操作。

$(function(){
  $('#ID for _userName').css('border-color', color);
});

For border color as all other told, but it should be on form submission.

对于所有其他人所说的边框颜色,但它应该在表单提交中。

<form ... onSubmit="ValidateUser(this)">
... Your form elements ...
</form>

And your JS would look like this

你的JS看起来像这样

function ValidateUser(frmObj){

    if (frmObj._userName.value.trim() == "") {
            errMsg += "\nUserName is a mandatory field.";
            $('#ID for _userName').css('border-color', color);
        }
        else {
            $('#ID for _userName').css('border-color', '');
        }
}

I will also suggest the same logic of creating a class same like Veera explained and to use that.

我还将建议创建一个与 Veera 解释的相同的类并使用它的相同逻辑。

回答by Castrohenge

I'd give the html element being changed a css class that specifies color.

我会给正在更改的 html 元素一个指定颜色的 css 类。

Just remove the border-color to reset it to the css class specified color:

只需删除边框颜色以将其重置为 css 类指定的颜色:

_userName.css("border-color", "")