5

こんにちは、contenteditable="true" div のテキストを制限しようとしています:

var char = 500;
$("#counter").append("You have <strong>" + char + "</strong> chars left.");
$("#editor").keypress(function () {
    if ($(this).text().length > char) {
        $(this).text($(this).text().substr(1));
    }
    var rest = char - $(this).text().length;
    $("#counter").html("You have <strong>" + rest + "</strong> chars left.");
    if (rest <= 100) {
        $("#counter").css("color", "#ff7777");
    }
    else {
        $("#counter").css("color", "#111111");
    }
});

残念ながら、次の問題に直面しています。

  1. デフォルトで div にテキストが含まれている場合、残りの文字数は挿入または削除されるまで更新されません。
  2. ユーザーが文字の最大数を超えた場合、改行はテキスト ボックスの先頭に移動し、最近挿入された文字の代わりに最初の文字を削除します。
  3. ユーザーが 200 文字を超えるテキストを貼り付けた場合、テキストは短縮されません。

コードを見つけてください: http://jsfiddle.net/mmacin/A69tk/1/

4

1 に答える 1

3

これが解決策を提供するための私の行き方です。パズルのピースが 1 つ欠けているので、すぐに完成させます。

ここにフィドルがあります

カウンターは希望どおりに機能します。残っているのは、ユーザーが制限を超えた場合に何をすべきかということです。

Twitter を使用したことがある場合は、余分な文字が取り除かれず、それらの文字がツイートの一部ではないことをユーザーに示すために、それらの文字が赤い選択で強調表示されることがわかります。

これが私が使用したjQueryです。

const limit = 200;
rem = limit - $('#editor').text().length;
$("#counter").append("You have <strong>" + rem + "</strong> chars left.");
$("#editor").on('input', function () {
    var char = $('#editor').text().length;
    rem = limit - char;
    $("#counter").html("You have <strong>" + rem + "</strong> chars left.");
    console.log(char)
    console.log(rem);
    if (char >= 100) {
        $("#counter").css("color", "#ff7777");
    }
    else
        $("#counter").css("color", "#111111");
    if(char>200)
    {
        //add code to either remove extra chars or highlight them.
    }

});

$("#editor").on('input', function ()キーを押すのではなく、テキストエリア内の入力をチェックするものを使用した場合は、テキストエリア内のユーザーのコピーペーストテキストを処理する必要があります。また、カウンターの仕組みを変更しました。自分でロジックを理解できると思います。

于 2013-09-11T08:06:34.393 に答える