更改文字輸入邊框顏色

Question

我想做一個表格，其中在發送之前使用JavaScript驗證數據。 當字段為空時，我要將其邊框設置為紅色。

HTML代碼：

<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中，外觀是硬編碼的）：

appearance: textfield;

但是，每當您更改某些內容時：

appearance: none;

並且當appearance為空時，您將看到2px插入邊框。

所以實際上寬度是這里的問題：

因此，您要更改2種屬性： Border-width和border-color
您現在需要兩行：

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

jsFiddle

但是，您自己的解決方案可能很優雅，因為它是用一行代碼定義的：

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

---

請注意，插入樣式會設置頂部和右側邊框變亮，其中底部和左側邊框是給定的顏色。 將樣式設置為solid將解決此問題。

使用border的整個簡寫屬性不會損害您的代碼。 當您想贏得用戶代理樣式表的勝利時，必須始終非常明確 。

Answer 3

我在生產中有這樣的事情，只是它使用警報而不是顏色更改。 使用CSS樣式和類：

的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>

然后將其添加到按鈕/控件的click事件中：

return checkField()

這樣的帖子似乎很相似： 使用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">