Chrome zählt Zeichen falsch in textarea mit dem Attribut maxlength

Hier ist, wie man den javascript-code entsprechend der Menge der Zeichen, die der browser glaubt, ist in die textarea:

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);
    })
})

Grundsätzlich nur zählen den gesamten Zeilenumbrüche in der textbox und fügen Sie 1, um die Anzahl der Zeichen für jedes.

Es scheint, wie die richtige Methode, basierend auf einer Spitzen Antwort oben, ist die Zählung aller neuen Linien als zwei Zeichen. Das standardisieren es ist in allen Browsern und mit, was wird gesendet, wenn es gepostet.

So konnten wir die Folgen der Spezifikation und ersetzen Sie alle vorkommen von Carriage Return, nicht gefolgt von einer Neuen Zeile, und alle Neuen Linien nicht, gefolgt von einem Wagenrücklauf, die mit einem Carriage-Return - Line-Feed-pair-Mädchen.

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

Dann verwenden Sie die variable zur Anzeige der Länge der textarea-Wert, oder es begrenzen, und so weiter.

Dass da eine neue Zeile eigentlich 2 bytes, und daher 2 lange. JavaScript nicht sehen es so und deshalb wird es zählen nur 1, so dass die Summe 7 (3 neue Linien)

Wenn Sie möchten, um die Verbleibende Länge des Inhalts von text-Bereich können Sie dann entsprechend auf den string mit den Zeilenumbrüche.

HTML:

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

JS:

var getContentWidthWithNextLine = function(){
    return 250 - content.length + (content.match(/\n/g)||[]).length;
}

Texteingabefelder sind noch nicht vollständig in sync unter den Browsern. Bemerkte ich 2 große Probleme: Wagenrücklauf und Zeichenkodierungen

Carriage return

Standardmäßig manipuliert werden als 2 Zeichen \r\n (Windows style).

Das problem ist, dass Chrome und Firefox wird, zählt es als ein Zeichen. Sie können auch wählen, es zu beobachten, es ist ein invisivle Charakter ausgewählt als ein Raum.

Einen workaround finden Sie hier:

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

Jquery Wort zählt, wenn die Benutzer geben Zeilenumbruch

Internet explorer auf der anderen hand hat, zählen als 2 Zeichen.

Ihre Vertretung ist :

Binäre: 00001101 00001010

Hex: 0D0A

und werden dargestellt in UTF-8 als 2 Zeichen gezählt und für maxlength als 2 Zeichen.

HTML-entities

1) Erzeugt aus dem javascript-code:

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

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

2) Analysiert, die aus dem Inhalt der textarea:

Ansi-code: 


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

3) Eingefügt mit der Tastatur Enter-Taste

4) Definiert als die multiline Inhalt der textbox

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

Zeichenkodierung

Zeichencodierung ein Eingabefeld wie textarea ist Unabhängiger als die Zeichenkodierung der Seite. Dies ist wichtig, wenn Sie planen, um die Anzahl der bytes an. Also, wenn Sie einen meta-header zu definieren, der ANSI-Codierung der Seite (mit 1 byte pro Zeichen), der Inhalt deiner textbox ist immer noch UTF-8 mit 2 Byte pro Zeichen.

Einen workaround für das character encoding ist hier zu sehen:

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-Codierung verloren gehen, wenn das Attribut gelesen Eingabefeld