Question

我正在尝试在文本区域中输入时进行字符计数。我有一个工作代码来计算。

代码如下

import Tkinter as tk
import tkSimpleDialog

def highlight():
    var = tkSimpleDialog.askstring("Text Highlighter", "format: x.x-x.x")
    a,b = var.split("-")
    aText.tag_add("bt", a, b)

txt = "First line of text \nSecond line of text \nThird line of text"

lord = tk.Tk()

aText = tk.Text(lord, font=("Georgia", "12"))
aText.grid()

aText.insert(tk.INSERT, txt)

aButton = tk.Button(lord, text="highlight", command=highlight)
aButton.grid()

aText.tag_config("bt", background="yellow")

lord.mainloop()

并从要显示计数的div调用它。

<script>
$(document).ready(function() {
    $('#Description').keyup( function(){
        var text_lengthDes = $('#Description').val().length;
        var text_leftDes = (250 - text_lengthDes);
        $('#Char_Count1').html(text_leftDes + ' Characters Left');
    });

});
</script>

现在它完美无缺。我想要在超过计数时更改颜色，以便用户可以看到他/她输入了太多字符。

如果有人可以提供帮助，那就太棒了

Answer 1

如果长度超过限制，则为#Char_Count1设置一个css类：

<script>
$(document).ready(function() {
  $('#Description').keyup( function(){
    var text_lengthDes = $('#Description').val().length;
    var text_leftDes = (250 - text_lengthDes);
    $('#Char_Count1').html(text_leftDes + ' Characters Left').toggleClass("limit", text_leftDes < 5);
  });
});
</script>

然后使用css为该元素提供所需颜色的类

.limit { color: red; }

就像Paolo所说，可以直接使用样式，但最好只在样式表文件（css）中使用样式而不是内联。

不要创建额外的标记（html标记），这会降低可读性和性能。

Answer 2

简单地完成：

<script>
$(document).ready(function() {
    $('#Description').keyup( function(){
        var text_lengthDes = $('#Description').val().length;
        var text_leftDes = (250 - text_lengthDes);
        var dHtml = (text_leftDes<0) ? '<span style = "color:red">' + text_leftDes + ' Characters left</span>' : text_leftDes + ' Characters left';
        $('#Char_Count1').html(dHtml);
    });

});
</script>

Answer 3

只需应用使文字变色的样式（例如红色）：

$('#Description').css( { "color", "#f00" } );

根据文字长度让颜色适当地切换为红色/黑色：

$('#Description').css( { "color", ( text_leftDes < 0 ? "#f00" : "000" ) } );

旁注：

在您设置#Char_Count1的文字内容时，最好使用jQuery＆＃39; text()，这样您就不必担心转义html了：

$('#Char_Count1').text(text_leftDes + ' Characters Left');

输入时更改计数器的颜色

3 个答案: