question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a recommended way of restricting input length?

See original GitHub issue

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?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
simonfranzencommented, May 29, 2019

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:

image

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.

1reaction
ethagnawlcommented, May 30, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to limit the number of characters allowed in form input ...
To set the maximum character limit in input field, we use <input> maxlength attribute. This attribute is used to specify the maximum number ......
Read more >
How to restrict number of characters that can be entered in ...
Hi! This method is working fine, if I restrict user up to 1/2/3 characters, but as soon as I go to the limit...
Read more >
JavaScript : Html form - Restricting the Length - w3resource
Checking string length. Sometimes situation arises when a field in an html form accept a restricted number of characters.
Read more >
HTML attribute: maxlength - MDN Web Docs
The maxlength attribute defines the maximum number of characters (as UTF-16 code units) the user can enter into an <input> or <textarea> ....
Read more >
What's the best practice for limiting text length in a field?
Truncate/chop off the text at the end, but don't alert the user,; Not truncate/chop off the excess text, but alert the user to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found