Question

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

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

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

Answer 1

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

更好的选择是使用类似

的类

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样式

4 个答案: