web-dev-qa-db-ja.com

Chrome maxlength属性を持つtextareaの間違った文字をカウントします

以下に例を示します。

$(function() {
  $('#test').change(function() {
    $('#length').html($('#test').val().length)
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=test maxlength=10></textarea>
length = <span id=length>0</span>

ブラウザが許可するまで、textareaを行（1行に1文字）で埋めます。終了したら、textareaを離れると、jsコードは文字も計算します。

したがって、私の場合、chromeが停止する前に7文字（空白を含む）しか入力できませんでした。maxlength属性の値は10ですが、

imgur

javascripthtmlgoogle-chrometextareamaxlength
40
Roman Pominov

キャリッジリターンは、maxlengthになるとそれぞれ2文字と見なされます。

1\r\n
1\r\n
1\r\n
1

しかし、javascriptは\r\n（どちらかはわかりません）合計すると7になります。

27
Neal

ブラウザがtextareaにあると信じている文字数に一致するようにJavaScriptコードを取得する方法は次のとおりです。

http://jsfiddle.net/FjXgA/53/

$(function () {
    $('#test').keyup(function () {
        var x = $('#test').val();

        var newLines = x.match(/(\r\n|\n|\r)/g);
        var addition = 0;
        if (newLines != null) {
            addition = newLines.length;
        }

        $('#length').html(x.length + addition);
    })
})

基本的には、テキストボックス内の改行の総数をカウントし、各改行の文字カウントに1を加算します。

36
Tim

理由は不明ですが、jQueryは常に_<textarea>_の値のすべての改行を単一の文字に変換します。つまり、ブラウザが改行として_\r\n_を指定した場合、jQueryは.val()の戻り値が_\n_であることを確認します。

ChromeとFirefoxは両方とも、_<textarea>_タグの長さを「maxlength」の目的で同じ方法でカウントします。

ただし、HTTP仕様では、改行は_\r\n_として表されることを主張しています。したがって、jQuery、webkit、およびFirefoxはすべてこの間違いを犯します。

結果は、サーバー側のコードにフィールド値の最大サイズが固定されている場合、_<textarea>_タグの "maxlength"はほとんど役に立たないということです。

編集 —この時点（2014年後半）では、Chrome（38）は正しく動作します。Firefox（33）は、各ハードリターンを2としてカウントしません文字。

14
Pointy

上記のPointyの回答に基づく正しい方法は、すべての新しい行を2文字としてカウントすることです。これにより、ブラウザ間で標準化され、投稿時に送信されるものと一致します。

したがって、仕様に従って、改行が続かない改行のすべての出現、および改行が続かない改行のすべてを、改行と改行のペアで置き換えることができます。

var len = $('#test').val().replace(/\r(?!\n)|\n(?!\r)/g, "\r\n").length;

次に、その変数を使用して、textarea値の長さを表示したり、制限したりします。

13
matt

Javascriptは改行文字の長さも考慮しているようです。

使用してみてください：


var x = $('#test').val();

x = x.replace(/(\r\n|\n|\r)/g,"");    

$('#length').html(x.length);

私はあなたのバイオリンでそれを使用し、それは働いていました。お役に立てれば。

3
anuragsn7

これは、新しい行が実際には2バイトであり、したがって2つの長さがあるためです。 JavaScriptはそのように認識しないため、1のみをカウントし、合計で7（3つの新しい行）になります

1
Rene Pot

JQueryの「val」関数をオーバーライドする、より普遍的なソリューションを次に示します。この問題をまもなくブログ投稿にし、ここにリンクします。

var originalVal = $.fn.val;
$.fn.val = function (value) {
    if (typeof value == 'undefined') {
        // Getter

        if ($(this).is("textarea")) {
            return originalVal.call(this)
                .replace(/\r\n/g, '\n')     // reduce all \r\n to \n
                .replace(/\r/g, '\n')       // reduce all \r to \n (we shouldn't really need this line. this is for paranoia!)
                .replace(/\n/g, '\r\n');    // expand all \n to \r\n

            // this two-step approach allows us to not accidentally catch a perfect \r\n
            //   and turn it into a \r\r\n, which wouldn't help anything.
        }

        return originalVal.call(this);
    }
    else {
        // Setter
        return originalVal.call(this, value);
    }
};
1
Stachu

テキスト領域の残りのコンテンツの長さを取得したい場合は、改行を含む文字列で一致を使用できます。

HTML：

<textarea id="content" rows="5" cols="15" maxlength="250"></textarea>

JS：

var getContentWidthWithNextLine = function(){
    return 250 - content.length + (content.match(/\n/g)||[]).length;
}
1
Rubi saini
var value = $('#textarea').val();
var numberOfLineBreaks = (value.match(/\n/g)||[]).length;
$('#textarea').attr("maxlength",500+numberOfLineBreaks);

既にIEにあるGoogleで完全に機能するため、スクリプトを回避する必要があります。 IEでは、 'break-line'が1回だけカウントされるため、IEでこの解決策を避けてください！

0
Fabio

テキストエリアはまだブラウザ間で完全に同期していません。キャリッジリターンと文字エンコードという2つの大きな問題に気付きました

キャリッジリターン

デフォルトでは、2文字として操作されます\ r\n（Windowsスタイル）。

問題はChromeであり、Firefoxはそれを1文字としてカウントします。スペースとして選択された非表示の文字があることを確認するために選択することもできます。

回避策は次のとおりです。

var length = $.trim($(this).val()).split(" ").join("").split('\n').join('').length;

ユーザーが改行を入力すると、Jquery Wordがカウントされます

一方、Internet Explorerでは2文字としてカウントされます。

それらの表現は次のとおりです。

バイナリ：00001101 00001010

Hex：0D0A

、およびUTF-8では2文字として表され、maxlengthについては2文字としてカウントされます。

HTMLエンティティは

1）JavaScriptコードから作成：

<textarea id='txa'></textarea>

document.getElementById("txa").value = String.fromCharCode(13, 10);

2）textareaのコンテンツから解析：

ANSIコード：＃13;＃10;

<textarea>Line one.&#13;&#10;Line two.</textarea>

3）キーボードのEnterキーから挿入

4）テキストボックスのmultilineコンテンツとして定義

<textarea>Line one.
Line two.</textarea>

文字エンコーディング

Textareaのような入力フィールドの文字エンコーディングは、ページの文字エンコーディングとは独立しています。これは、バイトをカウントする場合に重要です。そのため、ページのANSIエンコードを定義するメタヘッダー（1文字あたり1バイト）がある場合、テキストボックスのコンテンツは1文字あたり2バイトのUTF-8のままです。

文字エンコードの回避策は次のとおりです。

function htmlEncode(value){
  // Create a in-memory div, set its inner text (which jQuery automatically encodes)
  // Then grab the encoded contents back out. The div never exists on the page.
  return $('<div/>').text(value).html();
}

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

属性が入力フィールドから読み取られたときにHTMLエンコードが失われる

0
profimedica