如果文本字段為空，則使用JavaScript應用CSS樣式

Question

我在JavaScript中有此函數，我在HTML代碼中使用onclick事件調用了此函數：

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

我已經檢查了if語句是否可以通過在其中使用警報語句而不是insertrule來工作，但是即使該字段的值不為空，似乎仍應用了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選擇器並在字段上設置required屬性來使用純CSS。

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

<input name="email" required />

此處的實時版本： http ： //jsfiddle.net/devotis/z319pp1f/

我承認將所有必填字段都以紅色開頭有點敵意。

如果文本字段為空，則使用JavaScript應用CSS樣式

問題描述

4 個解決方案

解決方案1
3 2015-04-09 03:18:36

解決方案2
0 2015-04-09 03:24:56

解決方案3
0 已采納 2015-04-09 03:30:08

解決方案4
0 2015-04-09 19:01:30

如果文本字段為空，則使用JavaScript應用CSS樣式

問題描述

4 個解決方案

解決方案1 3 2015-04-09 03:18:36

解決方案2 0 2015-04-09 03:24:56

解決方案3 0 已采納 2015-04-09 03:30:08

解決方案4 0 2015-04-09 19:01:30

解決方案1
3 2015-04-09 03:18:36

解決方案2
0 2015-04-09 03:24:56

解決方案3
0 已采納 2015-04-09 03:30:08

解決方案4
0 2015-04-09 19:01:30