javascript - 如何更改 值？

Question

我是 HTML 的初学者，在学习 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/