Ik zou graag wat functionaliteit willen hebben waarmee ik schrijf
<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>
het zal automatisch de maxlength op de textArea opleggen. Geef indien mogelijk de oplossing niet in jQuery.
Opmerking: dit kan worden gedaan als ik zoiets als dit doe:
<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))
}
Gekopieerd van Wat is de beste manier om een HTML-invoerkenmerk “maxlength” te emuleren in een HTML-tekstgebied?
Maar het punt is dat ik niet elke keer onKeyPress en onKeyUp wil schrijven als ik een textArea declareer.
Antwoord 1, autoriteit 100%
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;
}
};
}
Antwoord 2, autoriteit 70%
Ik weet dat je jQuery wilt vermijden, maar aangezien de oplossing JavaScript vereist, is deze oplossing (met behulp van jQuery 1.4) de meest compacte en robuuste.
Geïnspireerd door, maar een verbetering ten opzichte van Dana Woodman’s antwoord:
Veranderingen ten opzichte van dat antwoord zijn: Vereenvoudigd en meer generiek, gebruikmakend van jQuery.live en ook geen val instellen als de lengte OK is (leidt tot werkende pijltjestoetsen in IE, en merkbare versnelling 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: bijgewerkte versie voor jQuery 1.7+, met behulp van on
in plaats van live
// 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));
}
});
Antwoord 3, autoriteit 29%
UpdateGebruik in plaats daarvan de oplossing van Eirik met .live()
omdat deze iets robuuster is.
Hoewel je een oplossing wilde die geen jQuery gebruikte, dacht ik er een toe te voegen voor iedereen die deze pagina via Google vindt en op zoek is naar een jQuery-achtige oplossing:
$(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));
});
});
});
Ik hoop dat dit nuttig is voor jullie Googlers die er zijn…
Antwoord 4, autoriteit 28%
HTML5 voegt een maxlength
-attribuut toe aan het textarea
-element, zoals:
<!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>
Dit wordt momenteel ondersteund in Chrome 13, FF 5 en Safari 5. Het is niet verrassend dat dit niet wordt ondersteund in IE 9. (Getest op Win 7)
Antwoord 5, autoriteit 4%
Deze oplossing vermijdt het probleem in IE waarbij het laatste teken wordt verwijderd wanneer een teken in het midden van de tekst wordt toegevoegd. Het werkt ook prima met andere browsers.
$("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" );
});
Mijn formuliervalidatie behandelt vervolgens alle problemen waarbij de gebruiker tekst heeft geplakt (lijkt alleen een probleem te zijn in IE) die de maximale lengte van het tekstgebied overschrijdt.
Antwoord 6, autoriteit 3%
Dit is een aangepaste code die ik zojuist op mijn site heb gebruikt. Het is verbeterd om het aantal resterende tekens aan de gebruiker weer te geven.
(Nogmaals sorry voor OP die geen jQuery heeft aangevraagd. Maar serieus, wie gebruikt er tegenwoordig geen 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");
// 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");
});
});
Is NIET getest met internationale multi-byte-tekens, dus ik weet niet zeker hoe het daar precies mee werkt.
Antwoord 7, autoriteit 3%
Voeg ook de volgende gebeurtenis toe om het plakken in het tekstgebied af te handelen:
...
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;
}
}
...
Antwoord 8, autoriteit 2%
Het kenmerk maxlength wordt ondersteund in Internet Explorer 10, Firefox, Chrome en Safari.
Opmerking:het kenmerk maxlength van de tag
<textarea>
wordt niet ondersteund in Internet Explorer 9 en eerdere versies, of in Opera.
van HTML maxlength-kenmerk w3schools.com
Voor IE8 of eerdere versies moet u het volgende gebruiken
//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);
}
});
}
P.S.
Het kenmerk maxlength van de tag
<input>
wordt ondersteund in alle belangrijke browsers.
van HTML maxlength-kenmerk w3schools.com
Antwoord 9, autoriteit 2%
U kunt jQuery gebruiken om het gemakkelijk en duidelijk te maken
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>
Het is getest in Firefox
, Google Chrome
en Opera
Antwoord 10
Betere oplossing vergeleken met het inkorten van de waarde van het tekstgebied.
$('textarea[maxlength]').live('keypress', function(e) {
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
if (val.length > maxlength) {
return false;
}
});
Antwoord 11
Klein probleem met bovenstaande code is dat val() geen change()-gebeurtenis activeert, dus als u backbone.js (of een ander framework voor modelbinding) gebruikt, wordt het model niet bijgewerkt.
Ik post dat de oplossing prima voor mij werkte.
$(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;
});
});
Antwoord 12
Ik heb onlangs maxlength
-gedrag geïmplementeerd op textarea
en stuitte op het probleem dat wordt beschreven in deze vraag: Chrome telt verkeerde tekens in textarea met maxlength-attribuut.
Dus alle implementaties die hier worden vermeld, werken met kleine fouten. Om dit probleem op te lossen, voeg ik .replace(/(\r\n|\n|\r)/g, "11")
toe vóór .length
. En hield het in gedachten bij het knippen van touw.
Ik eindigde met zoiets als dit:
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)));
}
Ik weet niet zeker of het probleem volledig is opgelost, maar voor nu werkt het voor mij.
Antwoord 13
Probeer deze jQuery die werkt in IE9, FF, Chrome en gebruikers kan aftellen:
$("#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>
Antwoord 14
Probeer dit codevoorbeeld te gebruiken:
$("#TextAreaID1").bind('input propertychange', function () {
var maxLength = 4000;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
});
Antwoord 15
Dit is veel gemakkelijker:
<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>