45

次に例を示します。

$(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

4

10 に答える 10

39

ブラウザがテキストエリアにあると信じる文字数と一致するように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を追加するだけです。

于 2013-07-04T04:50:25.837 に答える
32

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

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

しかし、javascriptは、合計で7\r\nになる（どれかはわかりません）の1つしかできなかったようです。

于 2012-04-05T14:56:11.470 に答える
14

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

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

ただし、HTTP仕様では、改行はとして表されると要求されてい\r\nます。したがって、jQuery、webkit、Firefoxはすべてこれを間違えます。

<textarea>結果として、サーバー側のコードのフィールド値の最大サイズが実際に固定されている場合、タグの「maxlength」はほとんど役に立ちません。

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

于 2012-04-05T15:06:40.063 に答える
14

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

したがって、仕様に従って、新しい行が続かないキャリッジリターンのすべてのオカレンス、およびキャリッジリターンが続かないすべての新しいラインをキャリッジリターン-ラインフィードのペアに置き換えることができます。

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

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

于 2014-01-31T18:57:25.803 に答える
3

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

使用してみてください：


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

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

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

私はあなたのフィドルでそれを使用しました、そしてそれは働いていました。お役に立てれば。

于 2012-04-05T15:03:17.600 に答える
1

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

于 2012-04-05T14:56:06.043 に答える
1

これは、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);
    }
};
于 2014-12-18T16:10:19.683 に答える
1

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

HTML：

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

JS：

var getContentWidthWithNextLine = function(){
    return 250 - content.length + (content.match(/\n/g)||[]).length;
}
于 2015-05-23T09:50:29.463 に答える
0 
var value = $('#textarea').val();
var numberOfLineBreaks = (value.match(/\n/g)||[]).length;
$('#textarea').attr("maxlength",500+numberOfLineBreaks);

すでにIEでグーグルで完璧に動作するスクリプトを避ける必要があります！IEでは、「ブレークライン」は1回だけカウントされるため、IEではこのソリューションを避けてください。

于 2015-05-09T00:54:19.990 に答える
0

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

キャリッジリターン

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

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

回避策はここにあります：

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

Jqueryの単語は、ユーザーが改行したときにカウントされます

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

それらの表現は：

バイナリ： 00001101 00001010

16進数： 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）テキストボックスの複数行コンテンツとして定義されます

<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エンコーディングが失われます

于 2017-07-23T02:12:16.793 に答える