Setting a character limit for Multiple lines of text column in a List is not straight forward. Depending upon the setting of the column, the solution varies.
Plain Text:
When you create Multiple lines of text column with "Plain Text", SharePoint renders this field as "TextArea" HTML element. You can set the character limit by making use of maxlength attribute of TextArea element.
The above script should be injected into NewForm.aspx and EditForm.aspx of SharePoint List. Of course, replace "FieldName" with your field name.
Enhanced Rich Text:
When you create Multiple lines of text column with Enhanced Rich Text, SharePoint renders this field as DIV with contenteditable attribute set. This is where it gets more tricky. If you closely observe, the IDs of the contenteditable DIV and the corresponding Label DIV are somewhat similar.
For this DIV, maxlength does not work. So we need to control the keydown event to limit the characters in the DIV.
Code credit: stackoverflow.
I've added additional condition for Left Arrow, Right Arrow, and Delete buttons. When the character count reaches 1000, it prevents the further keydown event and thereby control the input of additional characters.
Plain Text:
When you create Multiple lines of text column with "Plain Text", SharePoint renders this field as "TextArea" HTML element. You can set the character limit by making use of maxlength attribute of TextArea element.
$( document ).ready(function() {
$("textarea[id*=FieldName]").attr('maxlength','1000');
});
The above script should be injected into NewForm.aspx and EditForm.aspx of SharePoint List. Of course, replace "FieldName" with your field name.
Enhanced Rich Text:
When you create Multiple lines of text column with Enhanced Rich Text, SharePoint renders this field as DIV with contenteditable attribute set. This is where it gets more tricky. If you closely observe, the IDs of the contenteditable DIV and the corresponding Label DIV are somewhat similar.
For this DIV, maxlength does not work. So we need to control the keydown event to limit the characters in the DIV.
var max = 1000;
$("DIV[id*=FieldName][role=textbox]").keydown(function (e) { check_charcount(max, e); });
function check_charcount(max, e) {
if (e.which != 8 & e.which != 46 & e.which != 37 & e.which != 39
& $("DIV[id*=FieldName][role=textbox]").text().length > max) {
e.preventDefault();
}
}
Code credit: stackoverflow.
I've added additional condition for Left Arrow, Right Arrow, and Delete buttons. When the character count reaches 1000, it prevents the further keydown event and thereby control the input of additional characters.
Comments
Post a Comment