如何改变值？(how to change <meter> values?)

我在HTML初学者，并同时了解HTML5，我发现了一个很酷的工具，在<meter> 。但是，它不会更新; 它的存在为静态值！

我的问题很简单：我怎么使用的长度<textarea>改变的颜色<meter> ，以便用户将，例如，见红了，当他达到160个字符（最大值）？换句话说，计数<textarea>字符，并将它们发送到仪表标记的值。

Answer 1:

请注意，并非所有的浏览器将支持此标记。例如，通过IE浏览器不支持，直到IE10。 http://caniuse.com/#search=meter 。

像这样的东西应该工作：

HTML

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

(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:

什么，你需要做的是写一个计数的textarea的文本长度和设置表的价值到计数功能。

然后，你需要一个监听器添加到文本区域。无论是无论你决定使用KEYUP或按键或。

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

Answer 4:

我已经合并的两个（从他们的启发），和它的工作:)，处理复制过去，并实时更新:)

JavaScript的：

var meter = document.getElementById('shower');

function textCounter(field,maxlimit) {
field.value = field.value.substring(0, maxlimit);
var theLength = field.value.length;
meter.value = theLength;
}

HTML

<textarea name="description" id="description" rows="3" cols="60" required title="vous  devez mettre une petite description" placeholder="escence, 2006, roulant 100000km, toutes  options, siege en cuir" onKeyDown="textCounter(document.formacha.description,160)" onKeyUp="textCounter(document.formacha.description, 160)"></textarea>
<meter name="shower" min="1" max="160" value="1"id="shower" low="30" high="140">afficher son etat</meter>

文章来源: how to change values?