0

質問：

新しい html5 属性 contenteditable="true" を使用して ap タグ内の文字数を制御するにはどうすればよいですか?


テキストエリアでこれを行う方法を見つけました：http:
//jsfiddle.net/timur/47a7A/ （動作中）

しかし、apタグでこれを行うにはどうすればよいですか?
http://jsfiddle.net/47a7A/133/ (動作していません)

HTML 

<p id="textarea" maxlength="99" contenteditable="true">This content is editable with a max character count of 99.</p>
<div id="textarea_feedback"></div>

Jクエリ

$(document).ready(function() {
    var text_max = 99;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});
4

2 に答える 2

3

<p>要素には値がありません。それはinput、、textareaなどです。

使いたいtext()

$(document).ready(function() {
    var text_max = 99;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').text().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

作業例: http://codepen.io/paulroub/pen/Hfymr

于 2013-09-19T22:00:55.087 に答える
0

@PaulRoubの回答の問題は、キャレットカーソルが文字数制限を超えるとテキストの先頭に移動することです。jquery caretプラグインを使用してこの問題を解決しました。次のコードは、div 要素の 4000 文字の制限を示しています。id ="#text_area"

    <script src="~/Scripts/jquery.caret.js"></script>
    <script type="text/javascript">
        var limit = 4000;
        var $chars_left = limit - $('#text_area').text().length;

        $('#char_limit').text($chars_left); //char_limit is span element that is used as a counter
        $('#text_area').on('input', function (e)
        {

            var $char = $('#text_area').text().length;
            $chars_left = limit - $char;
            $('#char_limit').text($chars_left);
            if ($char > 4000)
            {
                var $text = $('#text_area').text().substr(0, 3999);
                $('#char_limit').text(0);
                $('#text_area').html($text);
                $('#text_area').caret(3999); //here is jquery.caret plugin that remain the position of the cursor
            }
        })
</script>
于 2014-08-25T15:48:13.853 に答える