2011-12-29 22 views
19

Quiero usar jquery para limitar el número de caracteres en un div editable (o entrada de formulario).Limite el número de caracteres en el campo de entrada

+14

lo que está mal con maxlength para una entrada de un formulario? – stivlo

+1

Echa un vistazo a esta publicación http://stackoverflow.com/questions/2867479/limiting-number-of-characters-in-a-contenteditable-div – Parham

+0

@stivlo b/c es una div editable – Firdous

Respuesta

5

En cuanto a campo de entrada se puede utilizar el atributo maxlength. Si usted está buscando div, los siguientes exámenes,

 $(function() { 

      $ ('#editable_div').keydown (function (e) { 
       //list of functional/control keys that you want to allow always 
       var keys = [8, 9, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145]; 

       if($.inArray(e.keyCode, keys) == -1) { 
        if (checkMaxLength (this.innerHTML, 15)) { 
         e.preventDefault(); 
         e.stopPropagation(); 
        } 
       } 
      }); 

      function checkMaxLength (text, max) { 
       return (text.length >= max); 
      } 
     }); 

     <div id="editable_div" contentEditable="true" onclick="this.contentEditable='true';" >TEXT BEGIN:</div> 

Edición: se debe reescribir la función checkMaxLength hacer caso omiso de las fichas y de nueva línea

+1

Esto no tiene en cuenta las pastas que establecerán el contenido en la longitud máxima – Navarr

42

hacer uso de maxlength en input etiqueta

<input type="text" maxlength="20" /> 
+0

NICE MAN. ..no estoy al tanto del funcionamiento del comando maxlength para los navegadores html 4. :) –

6

Si quieren hacer uso de jQuery se puede escribir algo por sí mismo o simplemente utilizar un plugin existente, como this one.

Pero estoy de acuerdo con dku.rajkumar ... ¿Qué hay de malo con el uso del atributo maxlength?

<input type="text" maxlength="15" /> 

Si eres el mayor fan jQuery vez embargo y desesperadamente desea establecer un maxlength a todos los campos de entrada a la vez hacer algo como:

$(document).ready(function() { 
    $('input[type="text"]').attr({ maxLength : 15 }); 
}); 

Hemos de tener en cuenta, sin embargo que este método (el de JQuery) no funcionará para personas que tienen (por alguna razón) JavaScript desactivado. Mientras que el atributo maxlength de la etiqueta input funciona para todos en todos los navegadores.

0

simplemente use el atributo llamado "maxlength". Puede leer más sobre los atributos de entrada en w3 input

4

Digamos que es entrada de formulario.
puedes hacerlo con el atributo 'maxlength' pero si dices 'usando jQuery',
aquí está la solución.

$('input#limited').attr('maxlength', '3'); 

o puede comprobar cada pulsación de tecla

$('input#limited').keypress(function() { 
    /* 
    check for 3 or greater than 3 characters. 
    If you check for only greater than 3, then it will let 
    you write the fourth character because just before writing, 
    it is not greater than three. 
    */ 
    if($(this).val().length >= 3) { 
     $(this).val($(this).val().slice(0, 3)); 
     return false; 
    } 
}); 
17

MaxLength atributo-navegador, para que admitan esta función.
Javascript - para los demás.

<input class="test-input" type="text" maxlength="12" /> 
<script> 
$('.test-input').unbind('keyup change input paste').bind('keyup change input paste',function(e){ 
    var $this = $(this); 
    var val = $this.val(); 
    var valLength = val.length; 
    var maxCount = $this.attr('maxlength'); 
    if(valLength>maxCount){ 
     $this.val($this.val().substring(0,maxCount)); 
    } 
}); 
</script> 

http://jsfiddle.net/tvpRT/

+0

muy bien, excepto que usaste una "entrada" en lugar de un div contenteditable :) –

+2

... probablemente porque no todos los navegadores admiten contenido editable ... La respuesta de Sergey es la mejor aquí :) – Rob

+0

No debería ser '$ this.val ($ this.val(). Substring (0, maxCount-1)) ; 'para dar cuenta de la subcadena que comienza en 0? Corrígeme si estoy equivocado por favor. Y sí, este es un hilo viejo, pero todavía lo leen las personas. – redfox05

8

Esto debería funcionar para usted creo.

HTML

<input type="text" name="myText" id="myText" data-maxlength="10" /> 

jQuery

$('#myText').keyup(validateMaxLength); 

function validateMaxLength() 
{ 
     var text = $(this).val(); 
     var maxlength = $(this).data('maxlength'); 

     if(maxlength > 0) 
     { 
       $(this).val(text.substr(0, maxlength)); 
     } 
} 
+0

¡bonito original! :) – RicardoE

Cuestiones relacionadas