javascript - parrafo - Chrome cuenta los caracteres incorrectos en textarea con el atributo maxlength

maximo de caracteres en un textarea

Question

Aquí hay un ejemplo:

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

Rellene el área de texto con líneas (un carácter en una línea) hasta que el navegador lo permita. Cuando termines, deja textarea, y el código js también calculará los caracteres.

Entonces en mi caso solo pude ingresar 7 caracteres (incluyendo espacios en blanco) antes de que Chrome me detuviera. Aunque el valor del atributo maxlength es 10:

Answer 1

A continuación, le indicamos cómo obtener su código de JavaScript para que coincida con la cantidad de caracteres que el navegador cree que se encuentran en el área de texto:

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

Básicamente, solo cuenta el total de saltos de línea en el cuadro de texto y agrega 1 al recuento de caracteres para cada uno.

Answer 2

Aquí hay una solución más universal, que anula la función jQuery ''val''. Hará que este tema se publique brevemente en un blog y se vincule aquí.

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

Answer 3

Esto se debe a que una nueva línea es en realidad de 2 bytes y, por lo tanto, de 2 de largo. JavaScript no lo ve de esa manera y, por lo tanto, solo contará 1, lo que hace un total de 7 (3 líneas nuevas)

Answer 4

Parece que el método correcto, basado en la respuesta de Pointy anterior, es contar todas las líneas nuevas como dos caracteres. Eso lo estandarizará en todos los navegadores y coincidirá con lo que se enviará cuando se publique.

Por lo tanto, podríamos seguir las especificaciones y reemplazar todas las ocurrencias de un retorno de carro no seguido de una nueva línea, y todas las líneas nuevas no seguidas por un retorno de carro, con un retorno de carro - par de avance de línea.

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

A continuación, use esa variable para mostrar la longitud del valor del área de texto, o limítelo, y así sucesivamente.

Answer 5

Parece que javascript está considerando la longitud del nuevo carácter de línea también.

Intenta usar:

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

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

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

Lo usé en tu violín y funcionó. Espero que esto ayude.

Answer 6

Por razones desconocidas, jQuery siempre convierte todas las líneas nuevas en el valor de un <textarea> a un solo carácter. Es decir, si el navegador le da /r/n una nueva línea, jQuery se asegura de que sea /n en el valor de retorno de .val() .

Chrome y Firefox cuentan la longitud de las etiquetas <textarea> la misma manera a los efectos de "maxlength".

Sin embargo, la especificación HTTP insiste en que las líneas nuevas se representan como /r/n . Por lo tanto, jQuery, webkit y Firefox todos obtienen esto mal.

El resultado es que "maxlength" en las etiquetas <textarea> es bastante inútil si su código del lado del servidor realmente tiene un tamaño máximo fijo para un valor de campo.

editar - en este punto (finales de 2014) parece que Chrome (38) se comporta correctamente. Firefox (33) sin embargo, todavía no cuenta cada devolución dura como 2 caracteres.

Answer 7

Si desea obtener la longitud del contenido restante del área de texto, puede usar la coincidencia en la cadena que contiene los saltos de línea.

HTML:

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

JS:

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

Answer 8

Sus retornos de carruaje se consideran de 2 caracteres cada uno cuando se trata de maxlength.

1/r/n
1/r/n
1/r/n
1

Pero parece que el javascript solo podría ser uno de los /r/n (no estoy seguro de cuál), que solo suma 7 .

Answer 9

Textareas todavía no están completamente sincronizados entre los navegadores. Noté dos problemas principales: devoluciones de carro y codificaciones de caracteres

Retorno de carro

Por defecto se manipulan como 2 caracteres / r / n (estilo de Windows).

El problema es que Chrome y Firefox lo contarán como un solo personaje. También puede seleccionarlo para observar que hay un carácter invisible seleccionado como espacio.

Una solución alternativa se encuentra aquí:

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

La palabra Jquery cuenta cuando el usuario escribe salto de línea

Internet Explorer, por otro lado, contará como 2 caracteres.

Su representación es:

Binario: 00001101 00001010

Hexágono: 0D0A

, y están representados en UTF-8 como 2 caracteres y contados para maxlength como 2 caracteres.

Las entidades HTML pueden ser

1) Creado a partir del código javascript:

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

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

2) Analizado desde el contenido del área de texto:

Código de Ansi: & # 13; & # 10;

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

3) Insertado desde el teclado tecla Enter

4) Definido como el contenido multilínea del cuadro de texto

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

Codificación de caracteres

La codificación de caracteres de un campo de entrada como textarea es independiente de la codificación de caracteres de la página. Esto es importante si planeas contar los bytes. Por lo tanto, si tiene un encabezado meta para definir la codificación ANSI de su página (con 1 byte por carácter), el contenido de su cuadro de texto sigue siendo UTF-8 con 2 bytes por carácter.

Aquí se proporciona una solución para la codificación de caracteres:

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

La codificación HTML se pierde cuando se lee el atributo del campo de entrada

Answer 10

var value = $(''#textarea'').val();
var numberOfLineBreaks = (value.match(//n/g)||[]).length;
$(''#textarea'').attr("maxlength",500+numberOfLineBreaks);

funciona perfectamente en google ya en IE tiene que evitar el guion! En IE, el ''break-line'' se cuenta solo una vez, ¡así que evita esta solución en IE!