使輸入欄位在包含值時設定樣式

當頁面加載并且它們為空時，如何使我的輸入表單中的必填欄位具有紅色邊框，以及如何在其中包含資料時將它們設定為恢復正常樣式？

我有這個代碼：

頁：

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">
   <div>
      <label for="firstName">First Name:</label><br>
      <input type="text" name="firstName" id="firstName" placeholder="First name &hellip;">
   </div>
   <div>
      <label for="lastName">Last Name:</label><br>
      <input type="text" name="lastName" id="lastName" placeholder="Last name &hellip;">
   </div>
</form>

Javascript：

// Border colour for input web forms
function borderColour() {

    var firstName = document.getElementById('firstName').value;
    var lastName = document.getElementById('lastName').value;
    var firstNameId = document.getElementById('firstName');
    var lastNameId = document.getElementById('lastName');

    if (firstName == '') {
        firstNameId.addClass("form-required");
    } else {
        firstNameId.removeClass("form-required");
    }
    if (lastName == '') {
        lastNameId.addClass("form-required");
    } else {
        lastNameId.removeClass("form-required");
    }
}

CSS：

.form-required {border: 2px solid red !important;}

uj5u.com熱心網友回復：

我建議使用 CSS 而不是 JavaScript：

input,
input:placeholder-shown {
  /* default <input> styles */
  border: 1px solid red;
}
input:not(:placeholder-shown) {
  /* has a value entered */
  border-color: gray;
}

參考：

• :not().
• :placeholder-shown.

uj5u.com熱心網友回復：

這是一個作業片段

// Border colour for input web forms
function borderColour(e) {
  if(e.target.value == '') {
     e.target.setAttribute("class", "form-required");
  } else {
     e.target.removeAttribute("class");
  }
}

var inputs = document.querySelectorAll('input');

inputs.forEach(function(el){
  el.onpropertychange = borderColour;
  el.oninput = borderColour;
});

.form-required {border: 2px solid red !important;}

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">

<div>
    <label for="firstName">First Name:</label><br>
    <input type="text" name="firstName" id="firstName" placeholder="First name &hellip;">
</div>

<div>
    <label for="lastName">Last Name:</label><br>
    <input type="text" name="lastName" id="lastName" placeholder="Last name &hellip;">
</div>

</form>

uj5u.com熱心網友回復：

首先，你應該考慮移動監聽腳本的事件

您可以使用querySelectorAll()此處獲取所有輸入的節點串列，而不是單獨選擇每個輸入

const inputs = document.querySelectorAll("input");

inputs.forEach(function (input, index) {
  input.addEventListener("input", () => toggleClass(index));
});

然后你應該創建一個函式來使用classList.add()andclassList.remove()而不是切換類addClass()

const toggleClass = (index) => {
  if (inputs[index].value === "") {
    inputs[index].classList.add("form-required");
  } else {
    inputs[index].classList.remove("form-required");
  }
};

uj5u.com熱心網友回復：

我無法添加評論，所以我看到您的 css 選擇器缺少一個點來定義一個類。如果這不是問題，請告訴我。

編輯：

好的，問題是您正在AddClass()用作函式，但它是一個jQuery函式。您需要改用.classList.add("form-required")方法。和removeClass方法一樣。相反，你應該使用.classList.remove("form-required")

并且不要忘記在函式定義之后呼叫您的函式。像這樣：

borderColour();

最終建議

但是你需要一個event listener而不是呼叫你的函式once on page load。因此，您需要將此功能添加到輸入的按鍵事件中。

示例代碼

HTML

<form id="theForm" method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">

<div>
    <label for="firstName">First Name:</label><br>
    <input type="text" name="firstName" id="firstName" placeholder="First name &hellip;">
</div>

<div>
    <label for="lastName">Last Name:</label><br>
    <input type="text" name="lastName" id="lastName" placeholder="Last name &hellip;">
</div>

</form>

CSS

.form-required {border: 2px solid red !important;}

Javascript（純香草）

// Border colour for input web forms
function borderColour() {

// You could use below comment to select all inputs but you will probably need to select a textarea too. So selection is a next step. 
//var inputs = document.querySelectorAll('input');
var firstNameSelector = document.getElementById('firstName');
var value = firstNameSelector.value;
  console.log(firstNameSelector.value);
  if(value == '') {
       firstNameSelector.classList.add("form-required");
     }
  else {
   firstNameSelector.classList.remove("form-required");
       }

}
//Adding an event listener to the form element. If you click outside the form you will get the class toggle if the input is empty it will get the red border an so on...
document.getElementById("theForm").addEventListener("focusout", borderColour);

您可以將事件偵聽器添加到所有輸入元素，但要做到這一點，您將需要一個回圈（可能是 foreach），就像其他答案一樣。

標籤：javascript html css 形式 风格

上一篇：表單中的action="mailto:*emailaddress*"無法通過HTTPS作業

下一篇：當按下ENTER時，按鈕單擊未擊中OnPost()方法