如何更改< meter>价值观?

问题描述

我是HTML的初学者，在学习HTML5的同时，我发现了一个很酷的工具<meter>.但是，它不会更新.它在那里是一个静态值！

I'm a beginner at HTML, and while learning about HTML5 I've found a cool tool, the <meter>. However, it won't update; it's there as a static value!

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

My question is simple: how do I use the length of a <textarea> to change the color of <meter>, so that the user will, for example, see red when he reaches 160 characters (the maximum value)? In other words, count the <textarea> characters, and send them to the value of the meter tag.

推荐答案

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

Note that not all browser will support this tag. E.g. no support by IE until IE10. http://caniuse.com/#search=meter.

类似的事情应该起作用:

Something like this should work:

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/

这篇关于如何更改< meter>价值观?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！