1

フィールドではなく<span>またはタグで値を出力する純粋なJavascriptテキスト残りカウンターを持つことは可能ですか? Jquery ソリューションまたはフィールドに出力するソリューションしか見つかりません。<p>inputinput

4

3 に答える 3

2

多くの人が純粋な Javascript であり、入力ボックスで数値をプレビューしない残りの文字数カウンターを望んでいることをネット上で見てきました。私は昨夜 JSFiddle をいじっていましたが、ちょっとした作業を行い、残りの文字を などの他のタグで表示することができました<span>。ですから、これをみんなと共有したいと思います。

HTML:

<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>

Javascript:

<script>
    function textCounter(textarea, countdown, maxlimit) {
        var textareaid = document.getElementById(textarea);
        if (textareaid.value.length > maxlimit)
          textareaid.value = textareaid.value.substring(0, maxlimit);
        else
          document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
      }
</script>

<script type="text/javascript">
    textCounter('message','messagecount',100);
</script>

ここにも動作するJSFiddleがあります

注: スクリプトを改善するためにスクリプトに貢献したい人がいる場合は、遠慮なくそうしてください。私はJavascriptの専門家ではないので、よりユーザーフレンドリーなソリューションである可能性が高い.

敬具

于 2012-07-01T15:35:46.707 に答える
1

ページにjQueryを配置すると、次のようなものも機能するはずです（そして、なぜそうしないのですか:)）：

$('#text-input-area').keyup(function(){
  $('#target-div').text(max_length-$(this).val().length + " characters remaining");
})
于 2012-07-01T15:46:47.047 に答える