Russ' Do It Yourself Home Workshop

Finding Fixes to Just About Anything and Everything

Setting the maxlength Attribute on a Multiple Lines of Text Field in SharePoint Online

Posted by Russell Wright on August 15, 2019

I had a situation where a person who created a SharePoint survey wanted to limit the amount of text that could be entered in a Multiple Lines of Text field.  There are many proposed solutions, but I was looking for the simplest.  Since the field is rendered as a “textarea” control you should be able to set the maxlength attribute to limit the number of characters that can be entered.  Here’s a bit of JavaScript that can do that. 

I first started with this post, but it was a little light on details, as there was no reference to JQuery.

http://sharepoint.sureshc.com/2016/04/how-to-set-character-limit-for-multiple-lines-of-text.html

Some prerequisites. 

  1. You must know how to add a script editor web part to a SharePoint page.  That’s where all the code goes. 
  2. The code must be placed on each page where you want to control the length.  That normally means NewForm.aspx and EditForm.aspx.
  3. You need to get the ID of each of the controls whose length you wish to limit.  These are pretty ugly in SharePoint.

You must first reference a JQuery library.  In this case, I’m pointing to one on the internet.  You can also download the library and place it in SharePoint and reference it from there.

If you notice we are selecting the control by its ID.  After the control is selected, its maxlength attribute is set to 15 (in this case).

//code.jquery.com/jquery-3.2.1.min.js
< script type="text/javascript">
$(document).ready(
    function() {
  $("textarea[id*=’ctl00_ctl30_g_2e673377_8091_422f_a4a7_026fa9b214d4_ctl00_ctl02_ctl01_ctl00_ctl00_ctl04_ctl00_ctl00_TextField’]").attr(‘maxlength’,’15’); }
  );
< /script>

In order to find the ID of the control, you can use the Edge or Chrome developer tools.  In either browser, you can press F12 to start the developer tools.  In the upper left corner you’ll see the element selector. 

image

Once you click the element selector you can switch to your browser window and select the control you wish to inspect.

image

You can see the ID of the control and copy/paste it for later use in your code.

image

Place your code in a script editor web part on the page (edit the page and add the web part to the page).

image

Here you can inspect the code again and see that the maxlength attribute has been added.

image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: