Come imporre maxlength su textArea in HTML utilizzando JavaScript

116

Mi piacerebbe avere alcune funzionalità con cui se scrivo

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

imporrà automaticamente la lunghezza massima a textArea. Se possibile, non fornire la soluzione in jQuery.

Nota: questo può essere fatto se faccio qualcosa del genere:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

Copiato da Qual è il modo migliore per emulare un attributo "maxlength" di input HTML su un'area di testo HTML?

Ma il punto è che non voglio scrivere onKeyPress e onKeyUp ogni volta che dichiaro una textArea.

javascript html textarea

— Rakesh Juyal
fonte

4

maxlenth per textareas è in html5. Al momento funziona in Chrome ma non in Firefox.

— Dave

113

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

— Josh Stodola
fonte

3

Josh sembra che funzionerà ma ti prego di spiegare cosa farà questa cosa --- if (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength"))) {- -

— Rakesh Juyal

2

Penso di ricordare qual è l'accordo: o FF o IE (penso che sia FF) restituisce una stringa diversa quando Javascript controlla l'attributo "value" rispetto a ciò che invia al server quando il modulo viene pubblicato! Ha qualcosa a che fare con il modo in cui le interruzioni di riga rigide fanno / non ottengono un carattere di ritorno a capo inserito. È facile da capire con un po 'di codice di debug sul lato client e server.

— Pointy

7

Ho cambiato l'ordine dell'avviso e il valore troncato: nell'ordine originale, l'onkeyup avvisava, facendo perdere il controllo al controllo e attivando l'onblur poiché il campo non era stato ancora troncato.

— GalacticCowboy

1

@JoshStodola - onblurnon gestirà la pasta fino a quando l'utente non fa clic fuori dalla textarea. onkeyupnon gestirà la pasta se viene eseguita tramite un menu contestuale o un menu del browser. Questo approccio funziona se non è necessario eseguire lo screening per incollare. Vedi questa risposta per un approccio basato sul timer stackoverflow.com/a/10390626/1026459

— Travis J

3

@JoshStodola - In effetti non puoi. Mi darebbe davvero fastidio come utente se avessi incollato un intero pezzo di qualcosa in un'area di testo, fatto clic su Invia e ne avessi visto solo una piccola parte passare senza alcuna risposta.

— Travis J

80

So che vuoi evitare jQuery, ma poiché la soluzione richiede JavaScript, questa soluzione (utilizzando jQuery 1.4) è la più coerente e robusta.

Ispirato, ma un miglioramento rispetto alla risposta di Dana Woodman:

Le modifiche rispetto a quella risposta sono: Semplificato e più generico, utilizzando jQuery.live e anche non impostare val se la lunghezza è OK (porta a lavorare con i tasti freccia in IE e una notevole velocità in IE):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

EDIT: versione aggiornata per jQuery 1.7+ , utilizzando oninvece dilive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

— Eirik W
fonte

1

Bello Eirik, come l'uso del live (me ne sono dimenticato!).

— Dana Woodman

5

Ho trovato bug in live () e jQuery da allora lo ha deprecato. Utilizzare invece su (). Se ti interessa il motivo: britishdeveloper.co.uk/2012/04/…

— BritishDeveloper

6

Ma se hanno modificato nel mezzo, questo ucciderà l'ultimo personaggio, non il nuovo personaggio, giusto?

— Joe Mabel

6

Già usato su () e funziona come una gemma. Grazie. ecco un violino leggermente modificato e ottimizzato: jsfiddle.net/nXMqc

— B-Money

6

Il problema con l'affettatura è che se si immettono caratteri al centro, vengono inseriti e la stringa viene tagliata dalla fine. Se l'intero testo non è visibile in una volta, questo può creare confusione. Anche l'utilizzo della funzione val (..) per modificare il valore sembra spostare il cursore alla fine della stringa. (se vuoi testarli con il browser moderno in violino, devi rimuovere l'attributo maxlength, altrimenti il browser applicherà il limite).

— Juha Palomäki

33

Aggiorna Usa la soluzione di Eirik usando .live()invece in quanto è un po 'più robusto.

Anche se volevi una soluzione che non usasse jQuery, ho pensato di aggiungerne una per chiunque trovasse questa pagina tramite Google e cercasse una soluzione jQuery:

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Spero che sia utile a voi googler là fuori ...

— Dana Woodman
fonte

1

La funzione associata al keyup dovrebbe essere: $ (this) .val ($ (this) .val (). Slice (0, maxlength));

— Brian Vallelunga

@brian Yup, hai ragione. Grazie per aver individuato il mio errore, risolto!

— Dana Woodman

$ (this) .val (function (i, val) {return val.slice (0, maxlength)});

— Dima Bildin

questo frammento è ancora utile poiché gli

— avanzamenti di

32

HTML5 aggiunge un maxlengthattributo textareaall'elemento, in questo modo:

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Questo è attualmente supportato in Chrome 13, FF 5 e Safari 5. Non sorprende che non sia supportato in IE 9. (Testato su Win 7)

— james.garriss
fonte

5

Questa soluzione evita il problema in IE in cui l'ultimo carattere viene rimosso quando viene aggiunto un carattere al centro del testo. Funziona bene anche con altri browser.

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

La convalida del modulo si occupa quindi di eventuali problemi in cui l'utente potrebbe aver incollato (sembra essere un problema solo in IE) il testo che supera la lunghezza massima dell'area di testo.

— Chris R
fonte

4

Questo è un codice ottimizzato che ho appena usato sul mio sito. È migliorato per visualizzare il numero di caratteri rimanenti all'utente.

(Scusami ancora per OP che non ha richiesto jQuery. Ma seriamente, chi non usa jQuery in questi giorni?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

NON è stato testato con caratteri multibyte internazionali, quindi non sono sicuro di come funzioni esattamente con quelli.

— Simon East
fonte

2

Aggiungi anche il seguente evento per gestire l'incollaggio nell'area di testo:

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...

— stusherwin
fonte

Qualcuno potrebbe aggiungerlo al corpo della risposta se pensa che sia ok? Non ho ancora abbastanza punti per farlo.

— stusherwin

La funzione Incolla non è standardizzata. Credo che funzioni solo in IE.

— Josh Stodola

Ho aggiornato la mia risposta per gestire la situazione della pasta. Grazie!

— Josh Stodola

2

L'attributo maxlength è supportato in Internet Explorer 10, Firefox, Chrome e Safari.

Nota: l'attributo maxlength del <textarea>tag non è supportato in Internet Explorer 9 e versioni precedenti o in Opera.

dall'attributo HTML maxlength w3schools.com

Per IE8 o versioni precedenti è necessario utilizzare quanto segue

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

PS

L'attributo maxlength del <input>tag è supportato in tutti i principali browser.

dall'attributo HTML maxlength w3schools.com

— Eason
fonte

1

Soluzione migliore rispetto al taglio del valore della textarea.

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});

— Bharat
fonte

1

Puoi usare jQuery per renderlo facile e chiaro

JSFiddle DEMO

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

È testato in Firefox, Google ChromeeOpera

— MaxEcho
fonte

Temo che quando il gestore viene eseguito, textviene riempito con il "valore" della texarea prima che sia stato aggiornato. Ciò significa che il tuo test dovrebbe essere if( text.length +1 > maxlength) {return false;}. Altrimenti, si potrebbero inserire solo maxlength - 1caratteri all'interno:/

— Stphane

Il tuo violino consente all'utente di inserire un altro carattere. IMO, il tuo test dovrebbe essere if(text.length+1 > maxlength)o if(text.length >= maxlength)...

— Stphane

Non funziona come previsto quando copio e incollo il contenuto

— Ranjit Kumar

0

Il piccolo problema con il codice sopra è che val () non attiva l'evento change (), quindi se usi backbone.js (o un altro framework per l'associazione di modelli), il modello non verrà aggiornato.

Sto postando la soluzione che ha funzionato alla grande per me.

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});

— Alexander Beletsky
fonte

0

Ho implementato il maxlengthcomportamento di textarearecente e mi sono imbattuto nel problema descritto in questa domanda: Chrome conta i caratteri errati nell'area di testo con l'attributo maxlength .

Quindi tutte le implementazioni elencate qui funzioneranno con piccoli bug. Per risolvere questo problema aggiungo .replace(/(\r\n|\n|\r)/g, "11")prima .length. E tienilo a mente quando tagli la corda.

Ho concluso con qualcosa del genere:

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

Non sono sicuro che risolva completamente il problema, ma per ora funziona per me.

— Roman Pominov
fonte

0

Prova questo jQuery che funziona in IE9, FF, Chrome e fornisce un conto alla rovescia agli utenti:

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>

— Leslie King
fonte

0

Prova a utilizzare questo esempio di codice:

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});

— Naveen
fonte

-1

Questo è molto più semplice:

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>

Espandi lo snippet

— erdomester
fonte

2

Tieni presente che questa soluzione non viene replicata completamente maxlengthperché puoi incollare stringhe più lunghe della lunghezza desiderata.

— Chris Bier