Question

我想创建一个表单，在发送之前使用JavaScript验证数据。当字段为空时，我想将其边框设置为红色。

HTML code：

<label>Question: </label><input type = "text" maxlength = "100" name = "question"> <br />

JavaScript代码1：

fields[i].style.borderColor = "red";

JavaScript代码2：

fields[i].style.border = "1px solid red";

如果我使用JS代码1，边框会改变颜色但宽度比以前大（即使我没有说到边框宽度）。如果我使用JS代码2，文本输入会缩小2px并且变化很明显。

如何仅更改边框颜色？

Answer 1

实际上，添加和删除类是首选：

$("input").change(function()
  {
     var value = $(this).val();
     if(value=="")
     {
          $(this).addClass("red-border");
          $(this).focus();
     }else
     {
          $(this).removeClass("red-border");
     }
  });

你的CSS：

.red-border{
    border: 1px solid red;
}

Answer 2

默认的用户代理样式表将其用于输入字段：

border: 2px inset;

现在你可能会问为什么这个默认没有定义？

默认情况下（在IE中，appreance是硬编码的）：

appearance: textfield;

但每当你改变一些东西时：

appearance: none;

当appearance为空时，您将看到2px插入边框。

所以实际上宽度是问题所在：

所以你想改变2个职业：Border-width和border-color 你现在需要2行：

document.getElementsByTagName('input')[0].style.border = "red";
document.getElementsByTagName('input')[0].style.borderWidth = "1px";

<强> jsFiddle

但是你自己的解决方案可能很优雅，因为它是用一行代码定义的：

fields[i].style.border = "1px solid red";

<小时/> 请注意，插入样式将顶部和右侧边框设置得更亮，其中底部和左侧边框是给定颜色。将样式设置为实体将解决此问题。

使用边框的整个速记属性不会损害您的代码。当您想要使用用户代理样式表赢得战斗时，您必须始终非常具体。

Answer 3

我在制作中有这样的东西，只是它使用警报而不是颜色变化。使用CSS样式＆amp;类：

CSS

.error {
    border:2px solid red;
}

的JavaScript

<script>
function checkField(){
    var f = document.getElementById('<name of field>').value;
    if (f === "") {
       document.getElementById('<name of field>').className = document.getElementById('<name of field>').className + " error";
       return false;
    }
}
</script>

然后将其添加到按钮/控件的点击事件中：

return checkField()

此SO帖子似乎相似：changing textbox border colour using javascript

Answer 4

使用轮廓而不是边框。

fields[i].style.outline = "1px solid red";

Answer 5

试一试。 Jquery的

 $("input").change(function ()
  {
     var value = this.value;
     if(value=="")
     {
          $(this).css("border", "1px solid red");
     }else
     {
        $(this).css("border",'');
     }
  }).trigger("change");

HTML

  <input type="text" class="col">

更改文本输入边框颜色

5 个答案: