键盘事件,char计数器和textLength prop两难

时间:2013-08-23 13:43:12

标签: javascript html google-chrome firefox keyboard-events

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

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

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

似乎当我按下键盘按钮时,首先用旧的textareaObj.value值处理键盘事件,然后计算新值,所以如果我输出console.log(textarea.value.length),它显示旧值但在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,因为程序看到我的输入不是char而是擦除按钮(keyCode 8)。

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

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

1 个答案:

答案 0 :(得分:0)

使用input事件将获得您想要的效果。见this fiddle。它会在值发生变化后触发,但在用户按下或按住某个键时会持续触发。