Question

我希望在用户输入时减少给定文本区域的字符数。我使用下面的代码

var txtArea = $('<textarea class="txtStyle"></textarea>').appendTo('.txtArea');
            var rem_txt = 500;
            var text = "Characters remaining";
            $('.txtStyle').keyup(function () {
                debugger;
                var txt_txtarea = $(this).val().length;
                rem_txt = rem_txt - txt_txtarea;
            });
                $('<div id="rem">' + text + '=' + rem_txt + ' </div>').appendTo('.txtArea');

但是div没有更新count的值。请帮助DEMO HERE

Answer 1

你没有更新你的处理程序中的html为keyup，你只是重新计算剩余的金额而不是更新UI。

如果更新事件处理程序中的内部文本，您将看到剩余的文本：

http://jsfiddle.net/5Lszd/4/

var lengthAllowed = 500,
txtArea = $('<textarea class="txtStyle"></textarea><div id="rem">Characters remaining ' + lengthAllowed + '</div>').appendTo('.txtArea');
$('.txtStyle').keyup(function () {
    var charsSoFar = $(this).val().length,
    remaining = lengthAllowed - charsSoFar;
    $('#rem').text('Characters remaining='+remaining);
});

虽然已达到最大文本但尚未处理。

Answer 2

您的问题是您在keyup功能之外显示初始值。在这里小提琴：http://jsfiddle.net/5Lszd/3/

Answer 3

您可以稍微降低代码的复杂性：

标记：

<textArea class="txtStyle" maxlength="500"></textArea>
<div id="txtRemaining"></div>

脚本

$('.txtStyle').keyup(function () {
      $('#txtRemaining').html('Characters remaining ' + (500 - $(this).val().length));
});

Fiddle Demo here

Answer 4

您需要更新每个keyup事件的内容

var txtArea = $('<textarea class="txtStyle"></textarea>').appendTo('.txtArea');
var rem_txt = 500;
var text = "Characters remaining";
$('.txtStyle').keyup(function () {
    var txt_txtarea = $(this).val().length;
    rem_txt = rem_txt - txt_txtarea;
    $('#rem').html(text + '=' + rem_txt); // update the value of #rem
});
$('<div id="rem">' + text + '=' + rem_txt + ' </div>').appendTo('.txtArea');

Answer 5

你需要更新txt，也不要更新rem_txt，它应该是const

//this should be a const
var rem_txt = 500;
var text = "Characters remaining";

$('.txtStyle').keyup(function() {

    var txt_txtarea = $(this).val().length;

    updateRemain(rem_txt - txt_txtarea);
});

function updateRemain(rem_txt) {

    var rem = $('#rem');
    if (!rem.length) {
        rem = $('<div id="rem"></div>').appendTo('.txtArea');
    }

    rem.html(text + '=' + rem_txt);
}

updateRemain(rem_txt);

http://jsfiddle.net/rooseve/WRj5a/1/

Answer 6

你没有在keyup之后更新值......

添加$('#rem').html(text + '=' + rem_txt);，你应该没问题！

http://jsfiddle.net/artificialflow3r/5Lszd/5/

Answer 7

您可以像这样简化代码

主要问题是你将rem_txt设置为500从修正值中减去任何新字符，而不是从500减去。你的代码应该看起来更像这样

var txtArea = $('<textarea class="txtStyle"></textarea>').appendTo('.txtArea');
$('<div id="rem">Characters remaining = 500 </div>').appendTo('.txtArea');

var text = "Characters remaining";
$('.txtStyle').keyup(function () {      
    var rem_txt = 500 - $(this).val().length; //Calculate your new length from 500 each time
    if($('#rem')) $('#rem').html('Characters remaining = '+rem_txt);
});

我首先在初始值中创建div，然后在你的keyup函数中创建它，修改它的HTML。您之前尝试更新keyup事件之外的div的HTML，因此实际上它只运行了一段代码。

fiddle here

如何减少字符数

7 个答案: