如何改变<仪表>价值观

how to change <meter> values?

本文关键字：lt gt 价值观 仪表 何改变 改变      更新时间：2023-09-26

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

我的问题很简单：如何使用<textarea>的长度来更改<meter>的颜色，以便用户在达到160个字符（最大值）时看到红色？换句话说，对<textarea>个字符进行计数，并将它们发送到仪表标签的值。

请注意，并非所有浏览器都支持此标记。例如，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>​

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/

如果使用jquery

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

至少我认为。。。。不管怎样都是这样

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

然后，您需要在文本区域中添加一个监听器。无论是按键还是按键，还是你决定使用的任何东西。

当该事件发生时，启动您的函数。

我将两者结合在一起（灵感来自它们），它起到了作用：），实时处理复制、过去和更新：）

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>
相关文章：