javascript - 计算文本区域/输入框中的字符数的优雅方法

Question

因此，我想告诉用户他们动态键入了多少个字符。我在网上看到几个使用“Onchange”或“OnKeyUp”的示例，但它们都是旧示例，看上去有点儿困惑。

有没有更好的办法？也许是将值绑定(bind)/分配(可能未正确使用该术语)某种方法，然后每次进行更改时进行检查的方法？

Answer 1

当您谈论动态显示已键入的字符数时，您将需要诸如onchange或onkeyup之类的事件……实际上没有其他方法。

此外:“将值分配给变量并每次进行更改时都进行检查”，但是通过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作为使用事件委托(delegate)的示例。我使用了 onchange，所以直到失去焦点时才显示长度，虽然有一些注释可以告诉您代码的功能，但是它写得相当仓促。如果您对此示例有任何疑问，请告诉我。

PS:如果您想实时更改长度，只需更换

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

与

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

没什么了!

更新2

针对您的最后一条评论:否，该代码将无效。 alert(e);行将尝试提醒 event object，因此，即使在IE上不是 undefined，您也只会看到'[object object]'。

为了帮助您了解jsfiddle中的代码的作用，我将逐步分解并逐步进行处理:

在我的示例中，输入字段(只有1个，但可能有100个)是主要div元素 #allInputs的所有子级。因此，首先，我们获得对该元素的引用:

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

然后，我们希望将一个事件侦听器附加到该div。由于IE中的事件冒泡以及所有其他浏览器中的事件捕获，因此在此元素内触发的所有事件都将通过div传递。 Here是一些图表，可以阐明我的意思。这是事件委托(delegate)的关键概念。一旦掌握了这一点，剩下的就很容易了。

现在，返回侦听事件: 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又一次固执不支持委托(delegate) 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-调用它并不重要。 (可以使用多个参数，但是我们必须进入闭包，在这里我将尝试坚持基础知识。)大多数浏览器在调用事件对象时都会将其传递给处理函数，请猜测哪个浏览器不会不能通过这个物体？是的，我们的老 friend IE是一个简单的解决方法: e = e || window.event;函数的第一行可以写成:

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

为什么？因为我们亲爱的 friend 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的value属性的长度，对吗？因此我们检查 target是否是 input标记，它仍然可以是任何可以想象的输入元素，因此我们还要检查其类型，仅当 target是文本输入时才显示长度:

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

与直接绑定(bind)事件相比，此方法有什么优势？同样:如果您将变更事件分别绑定(bind)到多个元素，则用户会注意到。另外一个好处是:选择，文本输入，单选按钮，...的更改事件都可以由1个功能处理。它所要做的只是一个switch语句。代替:

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

试试这个:

if (target.tagName.toLowerCase() === 'select')
{
    alert('You\'ve selected option number: ' + (target.selectedIndex + 1));
}
if (target.tagName.toLowerCase() !== 'input')
{//suppose I only want to deal with input and select elements
    return;
}
switch(target.type)
{
    case 'text':
        alert(target.value.length);//alerts length of input value
        return;//this event is done, return
    case 'radio':
        alert('The radio button is ' + (target.checked ? '' : 'un') + 'checked');
        return;
    case 'password': 
        if (target.value.length < 8)
        {
            alert('The password is too short, add '+(8 - target.value.length)+'chars');
            return;
        }
        var verifyPass = 'passIn_' + (target.id.match(/_1$/) ? '2' : '1');
        verifyPass = document.getElementById(verifyPass);
        if (verifyPass.value.length > 0 && target.value.length > 0 && verifyPass.value !== target.value)
        {
            alert('password confirmation failed');
        }
}
return;

如您所见，可以在绑定(bind)1个事件侦听器的单个函数中处理大量事件。如果直接绑定(bind)，则需要绑定(bind)大量的处理程序，可能需要编写多个函数，这些函数可能更难以维护，甚至更糟:这会使用户的网站呆滞。

好的，我现在完成了，可以上床睡觉了。我希望这对您有所帮助。如果您对运球不是很清楚，请阅读有关quirksmode的页面，并在Google上找到事件委托(delegate)的教程，但我希望我确实为您提供了所提供代码的充分解释，并为您提供了一些有关事件委托(delegate)为何的见解。正确的做事方式以及为什么-在屏幕后面-大多数库也以这种方式工作。如果您真的很犹豫是否包含无法理解的代码，那么了解jQuery几乎委托(delegate)所有事件，而不是直接绑定(bind)它们可能会很有用。