2

テキストエリアの文字数を 255 に制限したいが、Backspace、Delete、矢印キー、Home、End、PgUp などのキーは許可したい。また、Ctrl+C、Ctrl+X、Ctrl+V、テキストエリア内の Ctrl+A ショートカット。Ctrl+C または右クリック > 貼り付けでテキストを貼り付けた場合でも、文字数が 255 を超えることはありません。Opera 以外のブラウザでは、このmaxlengthプロパティを簡単に使用できますが、残念ながら Opera ではサポートされていません。

SOのいくつかのソリューションを見ましたが、どれも私が望むものを完全に実装していないようです。また、これらのソリューションは、多くのキーコードをハードコーディングするものもあるため、やや醜いものです。（たぶんそれが唯一のアプローチです。）

この問題を解決するには、どのようにアプローチすればよいですか?

4

1 に答える 1

2

inputOperaに関しては、イベントを処理できます：

$('textarea').on('input', function() {
    if (this.value.length > 255) this.value = this.value.substring(0, 255);
});

フィドル

注: IE<=8 はサポートされていません。これは技術的には MS のpropertychangeイベントと合わせることもできますが、IE8 のテキストエリアや図に貼り付けるとかなりバグがあります。

テキストエリアを自動的にシムするために、この少し粗いスニペットを作成しましたmaxLength。

$(function() {
    var helper = document.createElement('textarea');
    //if (!('maxLength' in helper)) {
        var supportsInput = 'oninput' in helper,
            ev = supportsInput ? 'input' : 'propertychange paste keyup',
            handler = function() {
                var maxlength = +$(this).attr('maxlength');
                if (this.value.length > maxlength) {
                    this.value = this.value.substring(0, maxlength);
                }
            };

        $('textarea[maxlength]').on(ev, supportsInput ? handler : function() {
            var that = this;
            setTimeout(function() {
                handler.call(that);
            }, 0);
        });
    //}

});

デモ

Opera 12.10 および IE8 でテスト済み。

maxlengthこれにより、DOM Readyの属性を持つテキストエリアに自動的にパッチが適用されます。イベントを祖先にアタッチしtextarea[maxlength]、子孫セレクターとして使用することで、明らかにイベントを委任できます (動的に生成されたテキストエリアがある場合)。

$(document).on(ev, 'textarea[maxlength]', ...)

最後に、Operaにはtextareasのプロパティがあるため、機能検出はコメント アウトされていmaxLengthます。html の値を DOMmaxLengthプロパティに解析し、textareas のデフォルト値 ( -1) を持たないためmaxLength、明らかに効果がありません。オペラで。

この Opera バグを適切に機能検出する方法が見つからないため、機能検出部分はコメント アウトされていtextareaますmaxLength。Opera のバグを機能的に検出できた場合は、自由に回答を編集してください。これは非常に局地的なバグのようですが、すぐに修正される予定です。

于 2013-06-08T03:06:34.283 に答える