0

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

这里有一个问题：我有一个“发送”按钮（用于发送消息），在我的 CSS 中，onhover会将背景颜色更改为稍暗。当您的最大字符数确实低于 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 的“撰写推文”框。:)

4

2 回答 2

0

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

最好的解决方案是删除style属性而不是指定“正常”颜色：

if (chars < 500 && chars > 0) {
    document.getElementById("charsLeftH").removeAttribute("style");
}
于 2013-06-02T03:22:31.697 回答
0

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，然后在返回底片时重复。

于 2013-06-02T14:33:58.637 回答