examples - jquery pdf

Cómo evitar que el usuario ingrese texto en el área de texto después de alcanzar el límite máximo de caracteres

Question

Quiero evitar que el usuario ingrese texto en textarea una vez que alcance un límite máximo de caracteres. Lo que estaba sucediendo es que cuando llegué al límite máximo, entonces mi barra de desplazamiento del área de texto se movió hacia arriba. De alguna manera, evito esto con este código.

jQuery(document).ready(function($) {
    $(''textarea.max'').keyup(function() {
        var $textarea = $(this);
        var max = 400;
        if ($textarea.val().length > max) {
            var top = $textarea.scrollTop();
            $textarea.val($textarea.val().substr(0, max));
            $textarea.scrollTop(top);

        }
    });
}); //end if ready(fn)

Pero también quiero que, después de alcanzar el límite máximo, el usuario no pueda escribir nada en el área de texto. Actualmente, lo que sucede es que después de alcanzar el límite máximo si el usuario presiona y mantiene presionada la tecla, los caracteres están escribiendo en el área de texto, aunque después de soltar el botón vuelve al texto original (es decir, $ textarea.val ($ textarea.val ()). substr (0, max));). Pero quiero que una vez que esta condición se haga realidad.

if ($textarea.val().length > max) {

El usuario no puede escribir nada. Quiero que el cursor desaparezca del área de texto. Pero si el usuario elimina algún texto, el cursor también está disponible para que el usuario escriba la entrada nuevamente. ¿Cómo puedo hacerlo?

Answer 1

El evento keyup se keyup después de que se haya producido el comportamiento predeterminado (área de texto de población).

Es mejor usar el evento de keypress y filtrar los caracteres no imprimibles.

Demostración: http://jsfiddle.net/3uhNP/1/ (con longitud máxima de 4)

jQuery(document).ready(function($) {
    var max = 400;
    $(''textarea.max'').keypress(function(e) {
        if (e.which < 0x20) {
            // e.which < 0x20, then it''s not a printable character
            // e.which === 0 - Not a character
            return;     // Do nothing
        }
        if (this.value.length == max) {
            e.preventDefault();
        } else if (this.value.length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
    });
}); //end if ready(fn)

Answer 2

Mantenlo simple

var max = 50;
$("#textarea").keyup(function(e){
$("#count").text("Characters left: " + (max - $(this).val().length));
});

y agrega esto en tu html

<textarea id="textarea" maxlength="50"></textarea>
<div id="count"></div>

ver ejemplo

Answer 3

Para aquellos que ya usan ES2015 en sus navegadores, aquí hay una implementación que utiliza algunas de las respuestas anteriores:

class InputCharacterCount {
  constructor(element, min, max) {
    this.element = element;
    this.min = min;
    this.max = max;
    this.appendCharacterCount();
  }

  appendCharacterCount(){
    let charCount = `<small class="char-counter help-block"></small>`;
    this.element.closest(''.form-group'').append(charCount);
  }

  count(event){
    this.element.attr(''maxlength'', this.max); // Add maxlenght attr to input element

    let value = this.element.val();
    this.element
      .closest(''.form-group'')
      .find(''.char-counter'')
      .html(value.length+''/''+this.max); // Add a character count on keyup/keypress

    if (value.length < this.min || value.length > this.max) { // color text on min/max changes
      this.element.addClass(''text-danger'');
    } else {
      this.element.removeClass(''text-danger'');
    }
  }
}

Uso:

let comment = $(''[name="collection-state-comment"]'');
let counter = new InputCharacterCount(comment, 21, 140);
$(comment).keyup(function(event){
  counter.count(event);
});

Answer 4

Puedes mantener tu evento tal como es, y solo usar esta library

Ejemplos

// applying a click event to one element

Touche(document.querySelector(''#myButton'')).on(''click'', handleClick);

// or to multiple at once

Touche(document.querySelectorAll(''.myButtons'')).on(''click'', handleClicks);

// or with jQuery

$(''.myButtons'').on(''click'', handleClicks);

Answer 5

Puedes usar this plugin en lugar de intentar escribir el tuyo. He encontrado que funciona bastante bien.

Answer 6

Simplemente escriba este código en su archivo Javascript. Pero debe especificar el atributo ''maxlength'' con textarea. Esto funcionará para todo el área de texto de una página.

$(''textarea'').bind("change keyup input",function() {

        var limitNum=$(this).attr("maxlength");

        if ($(this).val().length > limitNum) {
            $(this).val($(this).val().substring(0, limitNum));
        }

    });

Answer 7

Usted podría directamente dar maxlength a textarea para deshabilitarse. Pero, si desea mostrar el mensaje apropiado, use el evento keyup para el comportamiento predeterminado y la length textarea para calcular el carácter y mostrar el mensaje adecuado.

HTML

<div id="count"></div>
<textarea class="max"  maxlength="250" id="tarea"></textarea>
<div id="msg"></div>

jQuery

$(function(){
    var max = parseInt($("#tarea").attr("maxlength"));
  $("#count").text("Characters left: " + max);
    $("#tarea").keyup(function(e){
        $("#count").text("Characters left: " + (max - $(this).val().length));
    if($(this).val().length==max)
        $("#msg").text("Limit Reached....");
        else
        $("#msg").text("");
    });
});

Demo Fiddle

Answer 8

<textarea maxlength="400"> </textarea>

Utilice el código anterior para limitar el número de caracteres insertados en un área de texto. Si desea desactivar el área de texto en sí (es decir, no podrá editar después) puede usar javascript / jquery para desactivarlo.