使输入字段在包含值时设置样式

Posted 2023-02-22

【中文标题】使输入字段在包含值时设置样式

【英文标题】：making input fields styled when they contain values

【发布时间】：2022-01-24 02:21:30

【问题描述】：

如何让我的输入表单中的必填字段在页面加载且它们为空时具有红色边框，以及当它们内部有数据时如何将它们设置回正常样式？

我有这个代码：

页面：

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

【问题讨论】：

onload 在组件加载后立即运行，不应该在用户提交表单的时候运行这个函数吗？

否，因为在填写表单时结果需要是动态的 - 当字段有值时，边框会从红色变为灰色。这是在提交表单之前很久。

【参考方案1】：

我无法添加评论，所以我看到您的 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），就像其他答案一样。

【讨论】：

点在那里，只是我的代码复制/粘贴错误。

【参考方案2】：

我建议使用 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。

【讨论】：

通过这样做，输入将在用户尝试输入任何内容之前被标记为错误。

这很好用。我现在正在尝试扩展它以与这样的列表以相同的方式工作，其中值“选择”基本上是列表的占位符 - .list-required border: 1px solid gray; .list-required option[value ="Select"] border: 1px 纯红色;

【参考方案3】：

首先，你应该考虑移动监听脚本的事件

您可以在此处使用querySelectorAll() 获取所有输入的节点列表，而不是单独选择每个输入

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

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

然后您应该创建一个函数来使用classList.add() 和classList.remove() 而不是addClass() 切换类

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

【参考方案4】：

这是一个有效的 sn-p

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