[jQuery] Limiter le nombre de ligne d'un TextArea
Limiter le nombre de lignes des 'TextArea' pour lesquels l'attribut 'data-limit-rows' est défini sur 'True'.
La limite est définit par l'attribut "rows" de la zone de texte.
Pour savoir combien de lignes ont été entrées, vous devez regarder le nombre de caractères de nouvelle ligne (\n) dans le texte.
Pour ce faire, vous pouvez scinder le texte sur le caractère de retour chariot et examiner la longueur du tableau obtenu: myText.split(/\n/g).length;
Cela fonctionnerait correctement dans tous les navigateurs, à l'exception d'un cas particulier d'Internet Explorer 8, dans lequel l'utilisateur appuyait plusieurs fois sur la touche Entrée, produisant ainsi des lignes vides.
Ainsi, plutôt que de split() sur le caractère de nouvelle ligne, vous devez match() le caractère de retour chariot pour avoir une idée du nombre de nouvelles lignes actuellement présentes dans la zone de texte.
Cela fonctionne de manière cohérente sur tous les navigateurs, y compris IE8.
<textarea data-limit-rows="true" cols="60" rows="8"></textarea>
$(document).ready(function () {
$('textarea[data-limit-rows=true]')
.on('keypress', function (event) {
var textarea = $(this),
text = textarea.val(),
numberOfLines = (text.match(/\n/g) || []).length + 1,
maxRows = parseInt(textarea.attr('rows'));
if (event.which === 13 && numberOfLines === maxRows ) {
return false;
}
});
});
Pour savoir quelle touche a été enfoncée, il est préférable d'utiliser l'événement jQuery. Cela signifie que vous n'avez pas à vous soucier de charCode et de keyCode.