如果文本字段为空，则使用JavaScript应用CSS样式

Applying a CSS style using JavaScript if text field is empty

本文关键字：JavaScript 应用 CSS 样式 字段 文本 如果      更新时间：2023-09-26

我在JavaScript中有这个函数，我在HTML代码中使用onclick事件调用它：

function checkTextField(field) {
if (field.value == '') {
    sheet.insertRule("input:focus {background: #fc9fff;}", 1);
  }
}

我已经检查了if语句是否通过在其中使用alert语句而不是insertrule来工作，但似乎应用了css，即使字段的值不是空的。还有什么我可以用的吗？

问题是，当使用空元素执行check方法时，您正在为input:focus插入一个通用规则，当当前元素的焦点被移除时，该规则不会被移除。

更好的选择是使用类似的类

function checkTextField(field) {
    if (field.value == '') {
        field.classList.add('empty')
    } else {
        field.classList.remove('empty')
    }
}

然后在样式表中

input.empty:focus {
    background: #fc9fff;
}

您可以使用:required和:invalid选择器并在字段上设置所需的属性来实现纯CSS。

<style>
   input:required:invalid { background: #fc9fff; }      
</style>
<input name="email" required />

此处为实时版本：http://jsfiddle.net/devotis/z319pp1f/

我承认将所有必填字段都设为红色有点不友好。

我不确定我是否完全理解你的问题，但我已经创建了测试HTML文件，该测试有效：

<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style></style>
    <script>
var styleAlreadyAppended = false;
function checkTextField(field) {
    var sheet = document.styleSheets[0];
    if (field.value == '' && styleAlreadyAppended !== true) {
        sheet.insertRule("input:focus {background: #f30;}", 0);
        styleAlreadyAppended = true;
    }
    else if (field.value != '' && styleAlreadyAppended === true) {
        sheet.deleteRule(0);
    }
}
    </script>
</head>
<body>
    <div>
        <input id="testinput" type="text" value="">
        <button onclick="checkTextField(document.getElementById('testinput'))">test</button>
    </div>
</body>
</html>

在FF36上测试。

也许更好的方法是将函数附加到onchange事件上，如

<input type="text" onchange="checkTextField" />
相关文章：