希望这是一个有效的问题。
我在 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 中的内容。实际发生了什么?