how to change <meter> values?
-
28-06-2021 - |
Question
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.
La solution
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;
});
})();
Autres conseils
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 combined 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>