Is there a recommended way of restricting input length?

First off, thanks for creating such a simple, useful plugin!

I find myself needing to limit the length of text a user may enter into the pell editor. I’m tempted to tack on an event listener and call preventDefault on the event object if the length of the pell editor’s value is longer than N. Though, that seems like a kludge and like I’m working against the editor.

So, is there a recommended way of limiting the amount of text a user may enter into the pell editor? I’m looking at the source now and don’t see any obvious solutions. Perhaps the event object could be passed to settings.onChange from within content.oninput?

[simonfranzen]

I think you don’t have to restrict input. What worked is just to show the remaining characters and when it’s in a negative area you show a hint.

Something like this:

Look at this thread, it’s quit interesting: https://ux.stackexchange.com/questions/13055/character-limits-on-fields-pros-and-cons-and-best-practices

UX Max Input length for pell

Append automatically the counter element after the pell container. I have a more complicated version implemented, but here is my approach.

Add a data-target and adata-max attribute to your pell container.

<div class="pell-init" data-target="#unique_target" data-max="500"></div>

in onChange of pell init

onChange: function(html) {
      
      var element = $(this.element);
      var target = element.data('target');
      var max = element.data('max');
      var counterEle = $('.text-counter[data-target="'+target+'"]');

      var lengthWithoutTags = $(html).text().length;
      var counter = parseInt(max) - lengthWithoutTags;
      
      // create counter element after pell container if not present
      if (!counterEle[0]){
        console.log("create new");
        counterEle = $('<div class="text-counter" data-target="'+target+'"></div>')
        element.after(counterEle);
      }
      
      if (parseInt(counter) < 0) {
        counterEle.html(`<span>Please use only ${max} characters.</span><span>${counter}</span>`);
        counterEle.addClass('text-counter--invalid');
      } else {
        counterEle.html(counter);
        counterEle.removeClass('text-counter--invalid');
      }
      return true; // dont know if needed
},

Give your text-counter-element a bit of styling

.text-counter
  font-size: 1rem
  width: 100%
  display: flex
  justify-content: flex-end

  & > *:last-child
    margin-left: auto

.text-counter--invalid
  color: red

Please notice: When counting characters you cant count the HTML tags inside. If you do this the user gets crazy numbers. For this I used this line $(html).text().length. It returns just the text and not the text including HTML tags. You also have to consider this in your backend validators.

[ethagnawl]

Thanks, for following up @simonfranzen. That thread is an interesting read. I also wound up doing something similar to your approach in the application I was working on.