如何更改<meter>的值？

Question

我是一个超文本标记语言的初学者，在学习HTML5的同时，我发现了一个很酷的工具-- <meter>。但是，它不会更新；它是作为一个静态值存在的！

我的问题很简单:如何使用<textarea>的长度来更改<meter>的颜色，以便用户在达到160个字符(最大值)时看到红色？换句话说，计算<textarea>字符数，并将它们发送到meter标记的值。

Answer 1

请注意，并非所有浏览器都支持此标记。例如，在IE10之前，IE不支持。http://caniuse.com/#search=meter。

像这样的东西应该是有效的：

HTML

<textarea id="sometext"></textarea>
<meter value="10" min="0" max="160" id="somemeter">2 out of 160</meter>​

JS

(function() {
    var textarea = document.getElementById('sometext');
    var meter = document.getElementById('somemeter');

    var theLength = 0;

    textarea.addEventListener('keypress', function() {
        theLength = textarea.value.length;

        if (theLength > 160) {
            theLength = 160;
        }

        meter.value = theLength;
    });
})();​

演示：http://jsfiddle.net/RBUmQ/1/

Answer 2

如果您使用jquery

$("#meter_id").val($("my_text_area_id").val().length)

至少我认为...不管怎么说都是这样的

Answer 3

您需要做的是编写一个函数来计算文本区域中的文本长度，并将m的值设置为该计数。

然后，您需要向文本区域添加一个侦听器。无论是快捷键，还是按键，或者你决定使用的任何东西。

当这个事件发生时，触发你的函数。