How to display character count for string fields with max setting?

[pasi0014]

Is there a way to show the character limit for string field and update it in real time so the user knows how many characters they have left. Also, is it possible to make sure that user would still be able to save content even if they exceed the limit.

module.exports = {
  extend: '@apostrophecms/page-type',
  options: {
    label: 'Page',
  },

  fields: {
    add: {
      main: {
        type: 'area',
        options: {
          widgets: blocWidgets,
        },
      },
      title: {
        type: 'string',
        help: 'Defines the title of the page in search results or on the page\'s tab. It should be under 60 characters.',
        label: 'Title',
        max: 60,
      },
    },
  },
};

Thanks a lot!

[boutell]

This is an ordinary HTML input field, utilizing the maxlength attribute, so this can't be done out of the box.

As far as displaying the number of characters so far is concerned, you could override the AposInputString component, following this guide:

https://v3.docs.apostrophecms.org/guide/custom-ui.html

And this one:

https://v3.docs.apostrophecms.org/guide/custom-schema-field-types.html#implementing-the-server-side-part

Or perhaps submit a PR for such an optional feature rather than overriding the whole component for your project.

But as for saving the data when the input is too long, I would not recommend that. Depending on the purpose of the string field it could be dangerous (i.e. too many characters for some application, with unexpected results), and the back end has no way of knowing the difference between the "final" save and an "in-between" save.