3

私は HTML の初心者ですが、HTML5 について学習しているときに、すばらしいツールである<meter>. ただし、更新されません。それは静的な値としてそこにあります!

私の質問は簡単です:たとえば、ユーザーが 160 文字 (最大値) に達したときに赤く表示されるように、 a の長さを使用し<textarea>て の色を変更するにはどうすればよいですか? <meter>つまり、文字数を数えて<textarea>、meter タグの値に送信します。

4

4 に答える 4

3

すべてのブラウザがこのタグをサポートしているわけではないことに注意してください。たとえば、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/

于 2012-08-28T23:40:13.563 に答える
2

jqueryを使う場合

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

少なくとも私は思う....とにかくそのようなもの

于 2012-08-28T23:37:47.857 に答える
1

あなたがする必要があるのは、テキストエリア内のテキストの長さを数え、メートルの値をその数に設定する関数を書くことです。

次に、リスナーをテキストエリアに追加する必要があります。キーアップ、キープレス、または使用するものは何でも。

そのイベントが発生したら、関数を起動します。

于 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 に答える