0

希望这是一个有效的问题。

我在 javascript 中为 textarea 元素做了一个字符计数器。它等效于限制输入中允许的文本数量的字符计数器。当用户输入一个字符时,字符数会增加,并显示在下面的框中,以便用户知道他到目前为止写了多少个字符。

我用 keydown 和 keypress 处理它,因为每个浏览器的 charCode 属性都不相同,主要是 Chrome 和 Opera(没有在 Safari 中检查)。当 charCode 不起作用时,使用 keyCode。那不是问题。问题出在 textareaObj.value 属性中。

似乎当我按下键盘按钮时,首先使用旧的 textareaObj.value 值处理键盘事件,然后计算新值,所以如果我输出 console.log(textarea.value.length),它会显示旧的value 但在 Firefox 和 Chrome 的 Firebug 和 Developer 工具中,显示的值是新的 value.length,即 textarea.value.length 的真实值。

为了更好地解释它,我创建了一个函数来处理这些事件。我将 console.log(obj.value.length) 放在调用函数中。输出是旧值,但 firebug(或 firefox Web 控制台或 Chrome 控制台)显示的是 length 属性的实际值。谁能解释为什么会发生这种情况?

此外,在 textarea 对象中有一个 textLength 属性。它与 textareaObj.value.length 具有相同的值,但是当我尝试访问它时,它是未定义的。这是为什么?我在 Mozilla Developers 页面中查找了 textLength,但它只是说明了您所期望的,它包含文本的长度,但没有别的。

谢谢你的帮助。

编辑:

function execute() {
var txtArea = document.getElementById('description');

txtArea.addEventListener('keypress', charCount, false);
txtArea.addEventListener('keydown', charCount, false);

} http://jsfiddle.net/WUJvv/1/

代码示例就在 jsFiddle 链接中。

这里是。这适用于我的计算机,但不适用于 jsFiddle,我无法让它工作。我很抱歉。只需做我在 jsFiddle 中做的同样的事情,它应该可以工作。

len 变量在用户输入时必须递增,在用户擦除字符时必须递减。它做得很好,但是如果我突出显示大部分文本并将其全部擦除,它会减 1,因为程序看到我的输入不是字符而是擦除按钮(keyCode 8)。

假设我输入了 18 个字符的“这是一个句子”。我突出显示“句子”并删除它们。这让我有 10 个字符,但 txtArea.value.length 说 17,因为它只是看到我输入的不是字符,而是一个擦除按钮(keyCode 8)并且只是递减到 17。但是如果你查看 textarea Firefox Web 控制台中的对象,您将看到 textLength 属性为 10 并且 textarea.value 是 'This is a '(没有 'sentence' 部分)。textLength 属性在此示例中非常有用,因为它显示了文本的真实长度,但未定义。

我不是专家,但我猜想 javascript 首先进入处理事件的函数,然后查看 DOM 中的内容。实际发生了什么?

4

1 回答 1

0

使用input事件会得到你想要的。看到这个小提琴。它将在值更改后触发,但在用户按下或按住键时会持续触发。

于 2013-08-23T16:03:28.077 回答