3

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

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

4

4 回答 4

3

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

于 2012-08-28T23:40:13.563 回答
2

如果你使用 jquery

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

至少我认为....反正是这样的

于 2012-08-28T23:37:47.857 回答
1

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

然后，您需要向 textarea 添加一个侦听器。无论是按键还是按键或您决定使用的任何内容。

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

于 2012-08-29T00:04:21.750 回答
0

我已经将两者结合起来（从他们那里得到启发），它起作用了:)，实时处理复制、过去和更新:)

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>
于 2012-08-29T16:20:54.893 回答