Question

所以我想告诉用户他们动态输入了多少个字符。我在网上看到几个使用“Onchange”或“OnKeyUp”的例子，但它们都是旧的例子，它们看起来很古怪。

有更好的方法吗？也许某种方法绑定/分配（可能没有正确使用这个术语）变量的值，然后每次进行更改时检查？

Answer 1

如果您正在谈论动态显示已键入的字符数，那么您需要发送事件，例如onchange或onkeyup ......其实并非如此其他方式。

还有什么：＆＃34;将值分配给变量并在每次进行更改时进行检查＆＃34;除了onchange之外你还能知道你需要检查什么以及什么时候？

快速，简单的方法：

document.getElementById('aninputId').onchange= function(e)
{
    console.log(this.value.length);//or alert(); do with this value what you want
};

要记住的一件重要事情是，如果您要处理很多元素，您可能需要考虑委派事件。 here您可以找到一个类似的（不重复的）问题，其中包含2个处理事件委派的答案。谷歌它可以找到更多有关这个强大功能的信息！

更新（小提琴）

好的，我将this quick fiddle设置为使用事件委派的示例。我使用了onchange，因此在焦点丢失之前不会显示长度，有一些评论可以告诉您代码的作用，但它的编写相当仓促。如果您对此示例有任何疑问，请与我们联系。

PS：如果你想在实时中改变长度，只需要替换

mainDiv.addEventListener('onchange',showLength,false);

与

mainDiv.addEventListener('keyup',showLength,false);

没有更多的东西！

<强> UPDATE2

回复您的上一条评论：不，该代码无法运作。 alert(e);行会尝试提醒event object，因此您只能在IE上看到“对象对象”，如果不是undefined。

为了帮助您了解我的jsfiddle的代码所做的事情，我将逐步细分并逐步完成：

在我的示例中，输入字段（仅有1个，但可能有100个）是主要div元素#allInputs的所有子元素。首先，我们得到对该元素的引用：

var mainDiv = document.getElementById('allInputs');//Here's where we'll listen for events

然后，我们想要一个附加到该div的事件监听器。由于IE中的事件冒泡以及所有其他浏览器中的事件捕获，在此元素内触发的所有事件都将通过div传递。 Here是一些图表，可能会澄清我的意思。这是事件委托的关键概念。一旦你得到这个，其余的很容易。

现在，回到监听事件：addEventListener执行它在锡上所说的内容：它附加到元素并侦听在该元素中触发/分派的事件。如果这些事件中的任何一个具有指定的类型，则它会调用一个函数。这个函数被称为回调，或者在这种情况下 - 事件处理程序。一如既往，IE并不像所有其他浏览器一样工作，所以首先我们检查addEventHandler方法是否适用于我们。

if (!(mainDiv.addEventListener))
{//if not: this is the IE way
    mainDiv.attachEvent('onfocusout',showLength);
}
else
{
    mainDiv.addEventListener('change',showLength,false);
}

在这两种情况下，第一个参数是一个字符串，说明我们想要收听的事件类型。在大多数情况下，addEventListener会从事件类型的名称中删除on。 IE，再次顽固不支持onchange事件被委派（它没有泡沫），我们通过听另一个事件解决这个问题：IE自己的onfocusout事件（如果输入元素失去焦点，它很可能用于输入，并且具有新值。这使得它成为检查值长度的正确时刻。
addEventListener有第三个参数，捕获事件，在这种情况下这是无关紧要的，但在quirksmode（上面的链接）上，您可以阅读有关此主题的更多信息，我建议您这样做。

function showLength(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;//ie== srcElement, good browsers: target
    if (target.tagName.toLowerCase() === 'input' && target.type === 'text')
    {
        document.getElementById(target.id + 'Span').innerHTML = target.value.length;
    }
}

现在进行实际的回调。像任何其他函数一样声明这个函数，并指定1个参数，在这种情况下e，或event - 并不重要你所谓的。（多个参数是可能的，但是我们必须进入闭包，我将尝试并坚持这里的基础知识。）当大多数浏览器调用它时，事件对象将被传递给处理函数，猜猜哪个浏览器没有通过这个对象？是的，我们的旧朋友IE，但这很容易解决：函数e = e || window.event;的第一行可以写成：

if (e === undefined)
{
    e = window.event;
}

为什么呢？因为我们亲爱的朋友Internet Explorer没有将事件对象传递给处理程序，而是将其保存在全局对象中，我们可以通过window.event访问它。

我们需要的下一件事是弄清楚事件被触发的元素。假设你有一个表单，有20个输入字段，10个单选按钮和16个选择元素，我们在div#allInputs级别检测到事件，我们只知道该事件是在这个元素中引发的。幸运的是，事件对象有一个属性，它包含对我们需要的元素的引用：

var target = e.target || e.srcElement;

再次，IE是不同的。如果您已经阅读（并记住）quirksmode页面上的内容：IE事件首先在元素级别触发，然后在DOM中向上冒泡，而所有W3C浏览器都在顶层调度事件，并且将其传递给实际元素。这解释了基本上相同属性的不同名称：调度W3C事件，然后找出他们的target元素，在元素上调度IE事件，并从源头冒泡。 - 我正在漂流。

现阶段我们知道什么？真的，我们需要知道的一切。我们知道发生了什么事件（e.type会告诉我们 - 在这种情况下要么改变，要么关注焦点）。我们改变/失去了焦点的元素，并在变量target中引用了该元素，因此我们可以得到它的值（target.value），它的id （target.id）和更重要的是：我们可以检查是否要继续做任何事情：

if (target.tagName.toLowerCase() === 'input' && target.type === 'text')

请记住，我曾谈到过你处理30多种元素而不是所有文本输入的情况？如果在select元素中选择了新选项，我们不想显示select值的属性的长度，是吗？因此，我们检查target是否为input标记。
这仍然可以是任何可以想象的输入元素，所以让我们检查它的类型是否只有{{} 1}}是一个文本输入，我们将显示长度：

target

这比直接绑定事件有什么好处？同样：如果您将更改事件分别绑定到多个元素，则您的用户将注意到。作为一个额外的好处：选择，文本输入，无线电，...的更改事件都可以由1个功能处理。所需要的只是一个switch语句。而不是：

document.getElementById(target.id + 'Span').innerHTML = target.value.length;
//or, if you want:
alert(target.value.length);

试试这个：

if (target.tagName.toLowerCase() === 'input' && target.type === 'text')
{
    document.getElementById(target.id + 'Span').innerHTML = target.value.length;
}

如您所见，可以在单个函数中处理大量事件，绑定1个事件侦听器。如果你直接绑定你需要绑定大量的处理程序，可能需要编写几个函数，这些函数可能更难维护甚至更糟：使你的网站对用户来说很迟钝。

好的，我现在已经完成并准备睡觉了。我希望这能为你解决一些问题。阅读关于quirksmode的页面，如果这个运球不清楚，请谷歌一个关于事件授权的教程，但我希望我确实为您提供了我提供的代码的充分解释，并且为您提供了一些有关事件原因的见解委托是正确的做事方式，为什么 - 在屏幕后面 - 大多数图书馆也以这种方式工作。
如果您真的犹豫是否要包含您无法理解的代码，您可能会发现知道jQuery委派几乎所有事件，而不是直接绑定它们是有用的。

Answer 2

您需要一个侦听器来检测添加/删除的字符，并相应地更改计数器。因此，您必须使用密钥监听器，或使用onchange

这是一个例子： Twitter-like Textbox Character Count with inline alert

Answer 3

如果您正在使用jQuery，那么有一个插件可以执行此操作。我在生产中使用它并且效果很好。

http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

Answer 4

使用jquery

$('input[name='the name of the input']').bind('keyup',function(){
 $('#show').val($(this).length)
});

Answer 5

有各种jquery插件提供此功能和各种配置
你可以看看：

http://youhack.me/2010/04/22/live-character-count-with-progress-bar-using-jquery/

http://qwertypants.me/counter/

希望，它会帮助你。

优雅的方式来计算textarea /输入框中的字符数

5 个答案: