Comment imposer maxlength sur textArea en HTML en utilisant JavaScript
je voudrais avoir une certaine fonctionnalité par laquelle si j'écris
<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>
il imposera automatiquement le maxlength sur le textArea. Si possible, veuillez ne pas fournir la solution à jQuery.
Note: Ceci peut être fait si je fais quelque chose comme ceci:
<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))
}
copié de Quelle est la meilleure façon d'émuler un attribut HTML input "maxlength" sur une textarea HTML?
mais le fait est que je ne veux pas écrire onKeyPress et onKeyUp chaque fois que je déclare un textArea.
15 réponses
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;
}
};
}
je sais que vous voulez éviter jQuery, mais comme la solution nécessite JavaScript, cette solution (en utilisant jQuery 1.4) est la plus consise et robuste.
Inspiré par, mais une amélioration par rapport à Dana Woodman réponse:
les Changements de cette réponse sont: Simplifié et plus générique, à l'aide de jQuery.live et aussi ne pas définir val si length est OK (conduit à travailler les touches fléchées dans IE, et la vitesse perceptible dans 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));
}
});
Modifier: version mise à jour pour jQuery 1.7+ , en utilisant on au lieu de 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));
}
});
Update utilisez la solution D'Eirik en utilisant .live() à la place car elle est un peu plus robuste.
même si vous vouliez une solution qui n'utilisait pas jQuery, j'ai pensé que je voudrais en ajouter une pour quiconque trouvant cette page via Google et à la recherche d'une solution jQuery-esque:
$(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));
});
});
});
J'espère que C'est utile pour vous les googleurs là-bas...
HTML5 ajoute un attribut maxlength à l'élément textarea , comme suit:
<!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>
est actuellement pris en charge dans Chrome 13, FF 5, et Safari 5. Il n'est pas surprenant que cela ne soit pas soutenu dans IE 9. (Testé sur Win 7)
cette solution évite la question dans IE où le dernier caractère est supprimé lorsqu'un caractère au milieu du texte est ajouté. Il fonctionne aussi très bien avec d'autres navigateurs.
$("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" );
});
ma validation de formulaire traite alors de toutes les questions où l'utilisateur peut avoir collé (semble être seulement un problème dans IE) du texte dépassant la longueur maximale de la textarea.
c'est du code modifié que je viens d'utiliser sur mon site. Il est amélioré pour afficher le nombre de caractères restants pour l'utilisateur.
(Désolé encore une fois à OP qui a demandé no jQuery. Mais sérieusement, qui n'utilise pas jQuery de nos jours?)
$(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");
});
});
N'a pas été testé avec des caractères internationaux multi-octets, donc je ne suis pas sûr comment cela fonctionne avec ceux exactement.
ajouter également l'événement suivant pour traiter du collage dans le textarea:
...
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;
}
}
...
l'attribut maxlength est supporté dans Internet Explorer 10, Firefox, Chrome, et Safari.
Note: l'attribut maxlength de la balise
<textarea>n'est pas supporté dans Internet Explorer 9 et versions précédentes, ou dans Opera.
from HTML maxlength attribut w3schools.com
pour IE8 ou versions précédentes, vous devez utiliser le après
//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.
l'attribut maxlength de la balise
<input>est supporté par tous les navigateurs principaux.
meilleure Solution par rapport à l'élagage de la valeur de la textarea.
$('textarea[maxlength]').live('keypress', function(e) {
var maxlength = $(this).attr('maxlength');
var val = $(this).val();
if (val.length > maxlength) {
return false;
}
});
vous pouvez utiliser jQuery pour le rendre facile et clair""
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>
il est testé dans Firefox , Google Chrome et Opera
un petit problème avec le code ci-dessus est que val() ne déclenche pas l'événement change (), donc si vous utilisez backbone.js (ou un autre framework pour la liaison des modèles), model ne sera pas mis à jour.
je poste la solution a bien fonctionné pour moi.
$(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;
});
});
j'ai mis en place maxlength comportement textarea récemment, et courir dans le problème décrit dans cette question: Chrome compte des caractères de mal dans le textarea avec l'attribut maxlength .
donc toutes les implémentations listées ici fonctionneront petit buggy. Pour résoudre ce problème, j'ajoute .replace(/(\r\n|\n|\r)/g, "11") avant .length . Et je l'ai gardé à l'esprit quand je coudais string.
j'ai terminé avec quelque chose comme ceci:
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)));
}
Je ne sais pas s'il résout le problème complètement, mais il fonctionne pour moi pour le moment.
essayez ce jQuery qui fonctionne en IE9, FF, Chrome et fournit un compte à rebours aux utilisateurs:
$("#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>
essayez d'utiliser cet exemple de code:
$("#TextAreaID1").bind('input propertychange', function () {
var maxLength = 4000;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
});
C'est beaucoup plus facile:
<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>