how to change values?

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.

Since you are using the (very new) meter element, it's likely best to use an [oninput](http://dev.w3.org/html5/spec/common-input-element-apis.html#common-event-behaviors) 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, Aug 29 '12 at 01:01
Edit: i've added a combinaison of the solutions to get a solution that worked :) — Abdelouahab Pp, Aug 29 '12 at 16:19

PeeHaa · Accepted Answer · 2012-08-28T23:52:30.317

3

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;
    });
})();

Demo: http://jsfiddle.net/RBUmQ/1/

edited Aug 28 '12 at 23:52

answered Aug 28 '12 at 23:40

PeeHaa

71,436
58
190
262

thank you, but the value here is static (meter.value = 160) i want a variable one – Abdelouahab Pp Aug 28 '12 at 23:44
1

document.getElementById('sometextarea').value.length – Joran Beasley Aug 28 '12 at 23:45
ahhhh! so the length of the textarea will be sent to the value of the meter! thank you :) – Abdelouahab Pp Aug 28 '12 at 23:47
so from what i understand meter.value = document.getElementById("sometextarea") – Abdelouahab Pp Aug 28 '12 at 23:48
1

@AbdelouahabPp 1 sec. let me update my answer and add a better demo – PeeHaa Aug 28 '12 at 23:50
ah! now it gets clearer for a beginner like me, thank you again for all :) – Abdelouahab Pp Aug 28 '12 at 23:53
1

@AbdelouahabPp See my updated answer and demo. Do note however that I only have created an eventhandler for `keypress`. Others to keep in mind are: `onpaste` and `oncut`. – PeeHaa Aug 28 '12 at 23:53
@PeeHaa the counter i've used the code from here http://www.shiningstar.net/articles/articles/javascript/dynamictextareacounter.asp he used onkeyUp and onkeyDown – Abdelouahab Pp Aug 28 '12 at 23:58
1

Consider using an *oninput* listener instead of multiple listeners for keyup/press/down, blur, paste, drop, etc. – RobG Aug 29 '12 at 01:04
@RobG thank you for the tip, i learn ;) PeeHaa IE is to download Opera or Chrome (firefox is too slow with html5...) – Abdelouahab Pp Aug 29 '12 at 16:18

score 2 · Answer 2 · answered Aug 28 '12 at 23:37

2

if you use jquery

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

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

answered Aug 28 '12 at 23:37

Joran Beasley

110,522
12
160
179

thank you but i try to avoid it, the page has not a lot of javascript code, and i dont wanna the user download extra stuff (jquery) the bandwidth here is bad – Abdelouahab Pp Aug 28 '12 at 23:43
yes, i hear a lot of good thing about jquery (less code and more efficient result) but the problem is that i try to avoid a maximum javascript, so the code will be inserted in the html, so it will be only extra kilobytes to the users to download – Abdelouahab Pp Aug 28 '12 at 23:50
1

most users have jquery cached if you link to a centrally hosted file ... and thus there is very little or no overhead ... but yeh its your call .... but it seems like you dont understand js all that well so a helper library like jquery would benifit you – Joran Beasley Aug 28 '12 at 23:52
yes, that what i'll do just after finishing the htl5 tutorials, am a beginner, and found in internet that html5 will free the user a little bit from javascript (form validation for example), and the first language i've learned is python, so it's a little difficult to get the transition from a dynamic typed language :p – Abdelouahab Pp Aug 29 '12 at 00:00
1

js is dynamic typed ... most of the time (Python is my favorite) – Joran Beasley Aug 29 '12 at 00:04
looooool dident know that, because when i see the braces (from (underscode*2)future(underscode*2) import braces ...loooooool) and the ; and the var word, it's not a good image :p – Abdelouahab Pp Aug 29 '12 at 00:07

score 1 · Answer 3 · answered Aug 29 '12 at 00:04

1

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.

answered Aug 29 '12 at 00:04

Norguard

26,167
5
41
49

yes, but the problem how :p i got the solution, thank you all :) – Abdelouahab Pp Aug 29 '12 at 00:09

score 0 · Answer 4 · answered Aug 29 '12 at 16:20

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>

how to change values?

4 Answers4

Linked