javascript - how to change <meter> values? - Stack Overflow

admin管理员组

文章数量:1315061

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!

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.

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!

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.

• javascript
• html
• meter

Share Improve this question Follow edited Aug 29, 2012 at 1:17 Brad Koch 20.3k2020 gold badges112112 silver badges140140 bronze badges asked Aug 28, 2012 at 23:32 Abdelouahab PpAbdelouahab Pp 4,4601212 gold badges4444 silver badges6565 bronze badges 2

• 1 Since you are using the (very new) meter element, it's likely best to use an oninput listener. Note that support for both the meter element and input event is only reliable in very recent browsers (e.g. IE 10, Safari 5+, etc.). – RobG Commented Aug 29, 2012 at 1:01
• Edit: i've added a binaison of the solutions to get a solution that worked :) – Abdelouahab Pp Commented Aug 29, 2012 at 16:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Note that not all browser will support this tag. E.g. no support by IE until IE10. http://caniuse./#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;
    });
})();​

Demo: http://jsfiddle/RBUmQ/1/

if you use jquery

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

at least i think .... something like that anyway

What you need to do is write a function which counts the length of text in the textarea and sets the value of meter to that count.

Then, you need to add a listener to the textarea. Whether it's a keyup or a keypress or whatever you decide to use.

When that event happens, fire your function.

i've bined the both (inspired from them), and it worked :) , handles copy, past, and updates in real time :)

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>

本文标签： javascripthow to change ltmetergt valuesStack Overflow