Add character or word count to SharePoint multi line plain text field and restrict input length


13.03.2011 Updated the code to handle pasting into the field by adding “blur” eventhandler. Referred jQuery from Google.


14.03.2010 Updated to count down from limit to 0 and color code the counter. Also merged the “Count characters” and the “Count words” functions to one. See new code and explanation below.

I got this request from Larry:

new request for you. Character/word counter for multiple line field to display below the field. Not general for all multiple lines, but setup in a way that can set fieldinternalnames in am arr. also can we add a character limit, so user can not enterany more text.

I have several character counters. cant get it on the form. I am also looking into adding it on the create field page. calculated fields can only accept about 1000 characters. would like a way to display the count on that page.

I cannot help with the “create new column page”, as it is a server side file, shared between all site collections running on this server.


IMG

Add a CEWP below your NewForm and EditForm and add this code:
Get the code here

Parameters explained:

  • FieldInternalName: FieldInternalName of the multi line plain text field.
  • countWords: true to count words, false to count characters.
  • limit: 0 for no limit and count up, a value bigger then 0 to set a limit and to count down.
  • colorCodeCounter: true to add orange/red coding when limit is approaching.
  • counterPrefix: The text to show before the counter.

Read here how to add a CEWP to the NewForm or EditForm and how to find the FieldInternalName of your columns.

Ask if anything is unclear
Alexander

25 Responses to “Add character or word count to SharePoint multi line plain text field and restrict input length”

  1. mark Says:

    this is great!

  2. larry Says:

    I really did not want to ask you this buti have been playing too long now.
    How can either or both counts, not have a limit, just count?
    How can character count, count down? most of the math I tried it causes it to fail at 0 and continues into the negitive numbers.
    also I like the color at max, but how about getting color fornat to orange forcount 10 – 5 and red 5 – 0?

  3. Larry Says:

    perfect, I should be able to modify this one for character count. Thanks a bunch

  4. SharePoint Kaffeetasse 170 - Michael Greth [SharePoint MVP] - SharePointCommunity Says:

    [...] Add character or word count to SharePoint multi line plain text field and restrict input length [...]

  5. SPPD137 SharePointPodcast - SharePointPodcast - SharePointCommunity Says:

    [...] Add character or word count to SharePoint multi line plain text field and restrict input length [...]

  6. SPPD137 SharePointPodcast - Michael Greth [SharePoint MVP] - SharePointCommunity Says:

    [...] Add character or word count to SharePoint multi line plain text field and restrict input length [...]

  7. asa Says:

    http://geekswithblogs.net/dotNETvinz/archive/2009/02/17/restrict-number-of-characters-to-be-entered-in-the-multiline.aspx

  8. hyder Says:

    nice tutorial but it looks complicated ! you can find a similar one here which seems to be easier to understand . it even includes a progress bar as you type in the text area .
    http://youhack.me/2010/04/22/live-character-count-with-progress-bar-using-jquery/

  9. Melinda Says:

    Hi Alexander,

    Thanks so much for posting this neat trick! I’m loving it!
    I did notice that when I copy and past information into the list without moving the cursor in the list – the code does not limit the word count.
    Have you encountered this issue? If so, how did you fix it?
    Thanks again,
    Melinda

  10. Liz Says:

    This is a great code. I’d like to modify it to work with the other multi-line text boxes, both the rich text and enhanced rich text. Could you point me in the right direction?

    Thanks!

    • Alexander Bautz Says:

      Hi,
      Things are much more complicated with rich text fields and i did deliberately make it for plain text fields… To have it work in a rich text field, you would have to handle the HTML wrapping the text and i do not think it will be easy to achieve. You cannot cut off the part exceeding the character limit as this would chop off parts of the HTML.

      Alexander

  11. Melinda Says:

    Hi Alexander,
    I can’t find your updated code for Character count. Unless I’m doing something wrong, I only see an empty txt file.
    Thanks for your help!

    • Alexander Bautz Says:

      Hi,
      Did you follow the link given in the article? – i did test it and it is not empty. What kind of browser do you use?

      Alexander

    • Melinda Says:

      I’m using Internet Explorer 8.
      I clicked on “Get the code here” in the article above.
      Then it brought me to the following directory:
      13. mars 2011 09:37 13.03.2011
      I clicked on the directory “13.03.2011″ and I get the following:
      13. mars 2011 09:38 2704 CEWP_Code.txt
      I only see a text file and when I open it – it appears empty.
      Please let me know what I’m doing wrong.
      Thanks,
      Melinda

  12. Beth Says:

    Hi Alexander,
    I am running into the same issue as Melinda. I am also using IE8.

    Thanks,
    Beth

    • Alexander Bautz Says:

      Hi Beth and Melinda,
      Did you right click and select “Save target as”?

      I have added a zipped version – try downloading that.

      Alexander

  13. Gayathri Says:

    Can it be used for SPFieldText Type too?

    • Alexander Bautz Says:

      Hi,
      You would have to replace “textarea” with “input” in the code. You can however set the maximum number of characters in the list settings for a single line of text-field.

      Alexander

  14. Rob Says:

    Hi Alexander,

    Have the counter appearing in myeditform, but it doesn’t move when I type. If when I load the page its remaining words:72, it remains as that no matter what I type

    Thanks

  15. beegee Says:

    Can this be used with custom list forms?

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 )

Twitter picture

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

Facebook photo

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

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 435 other followers