Explore the Experience in SharePoint 2013

Wednesday, January 14, 2015

SharePoint - Limiting number of character for multiple line text box using jQuery

4 comments
Hi Friends,

In this post , i would like to explain how we can limit the character length inside multi line text of List Column.

Generally, when we create  column in SharePoint List ,we use to select "Multi line Text " Data type from the available out of box columns.

Scenario :
If you are asked to  limit the  character length upto 200 only or it depends on client requirment we can also limit to 99 characters only then we can achieve this functionality using Jquery Script .

How to implement this functionlity ?

Please follow below steps to implement the functionality.

1. When  you create a column with Data Type "Multiline Text" then you need to opt plain text option.
   




2. Copy the below script and paste in the content editor web part and place the web part on top of NewForm.aspx and EditForm.aspx for the list in which you have created this column(Multi Line Text).

<script src="/SiteAssets/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("textarea[title$='Description']").keyup(function(){
var txtValue = $("textarea[title$='Description']").text();
if(txtValue.length > 200){
alert("Your message...");
$("textarea[title$='Description']").val(txtValue.substring(0,199));
}
});
});
</script>
 

Note : i). We need to refer the  jquery-1.10.2.min.js
                In my case I have downloaded the file and placed in SiteAssets library .
           ii). We need to give the column name here (My Column name is Description).

 3 . Now after adding the Content editor to page click save and try entering the text in the Multi line text box .
     




This is how we use to limit the characters length in Multi Line Text Column

4 comments :

  1. I get Error: $ is not defined --> referring to $(function(){

    ReplyDelete
    Replies
    1. I am also getting same error

      Delete
    2. Jquery reference might be missing. Add jquery file in Site assets. then refer it in content editor in the same page.

      Delete