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

Question

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

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

我已经通过在其中使用警报语句而不是插入规则来检查 if 语句是否有效，但似乎应用了 css，即使字段的值不为空。还有什么我可以用的吗？

Answer 1

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

更好的选择是使用 class 比如

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

然后在您的样式表中

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

Answer 2

也许更好的方法是像这样将您的函数附加到 onchange 事件

<input type="text" onchange="checkTextField" />

Answer 3

我不确定我是否完全理解你的问题，但我已经创建了测试 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 上测试。

Answer 4

您可以使用 :required 和 :invalid 选择器并在字段上设置所需的属性，从而获得纯粹的 CSS。

<style>
   input:required:invalid { background: #fc9fff; }      
</style>

<input name="email" required />

现场版在这里：http://jsfiddle.net/devotis/z319pp1f/

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

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

Applying a CSS style using JavaScript if text field is empty

html

javascript

css

onclick