Question

我有一个文本字段，并且有一个最大字符计数器（不使用我的HTML中的maxlength）。以下是它的工作原理：它从500个字符开始，当您键入时，数字将减少。计数器位于文本字段下方。当它变为0时，它将进入底片，JavaScript将其变为红色。

这里有一个问题：我有一个“发送”按钮（用于发送消息），在我的CSS中，在hover上，它会将背景颜色更改为稍暗。当您使用最大字符数进行低于0时，我将JavaScript更改为“发送”按钮的背景颜色为灰色。当你删除字符并最终从负片中获取字符数时，我希望按钮再次显示正常。但是，当我将鼠标悬停在“发送”按钮上并恢复正常后，背景不会变暗（但当我回到底片时会变灰）。

这是我的HTML和JavaScript代码（我假设CSS代码已经可以预测）：

<form><textarea class="areas" id="type_area" placeholder="Chat..." onkeyup="charsLeft()" onkeydown="charsLeft()"></textarea></form>
    <div id="char_count">
        <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
    </div>
    <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                }
            };
        </script>

编辑：我正在尝试复制Twitter的“撰写推文”框，如果这看起来不够相似的话。：）

Answer 1

JavaScript将样式放在元素的style属性中，这通常会覆盖CSS。

最佳解决方案是删除style属性，而不是指定＆＃39; normal＆＃39;颜色：

if (chars < 500 && chars > 0) {
    document.getElementById("charsLeftH").removeAttribute("style");
}

Answer 2

removeAttribute("style")无效。但我找到了解决方案！

        <div id="char_count">
            <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
        </div>
        <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                    document.getElementById("submitX").id="submit";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                    if (chars < 0) {document.getElementById("submit").id="submitX";}
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                    document.getElementById("submitX").id="submit";
                }
            };

            charsLeft();
        </script>

我更改了按钮的ID，在我的CSS中，我为另一个带有灰色背景的ID（#submitX）添加了另一种样式。当它超出底片时，它会将新的提交按钮（#submitX）更改为#submit，然后在它返回底片时重复。

使用JavaScript修改“Span”时禁用悬停效果

2 个答案: