Using HTML5 (or less preferably JavaScript) is it possible to limit the maximum length of an input to a particular number of bytes?

I realise that I can limit to a number of characters with:

<input type="text" maxlength="4" />

But that's not good enough because I can input up to four two-byte chars in it.

Obviously I am validating this server-side, but I would like this on the browser-side too.

Edit: Just to be clear, I do wish to be able to support UTF-8. Sorry @elclanrs.

Using HTML5 (or less preferably JavaScript) is it possible to limit the maximum length of an input to a particular number of bytes?

I realise that I can limit to a number of characters with:

<input type="text" maxlength="4" />

But that's not good enough because I can input up to four two-byte chars in it.

Obviously I am validating this server-side, but I would like this on the browser-side too.

Edit: Just to be clear, I do wish to be able to support UTF-8. Sorry @elclanrs.

• javascript
• html
• validation
• forms

Share Improve this question Follow edited Jun 6, 2013 at 13:17 meshy asked Jun 5, 2013 at 20:56 meshymeshy 9,1361010 gold badges5454 silver badges7676 bronze badges 5

• 1 clientside+serverside ajax? – Alessandro Gabrielli Commented Jun 5, 2013 at 21:02
• Or maybe just limit the characters on keydown with something like /[\w\s]+/ which will be all 1byte. – elclanrs Commented Jun 5, 2013 at 21:05
• The user can input up to four characters, each of which can be up to four bytes long when UTF-8 is used. I don’t see the point of this question. Why would you limit input to a certain amount of bytes? The data will be processed as characters anyway. – Jukka K. Korpela Commented Jun 6, 2013 at 3:58
• @JukkaK.Korpela Thank you for reminding me that non-ASCII chars can be more than 4 bytes. The data will not be processed as characters on the server. It is an unavoidable limitation that I must use a particular number of bytes. – meshy Commented Jun 6, 2013 at 12:56
• @AlessandroGabrielli I'm not really enamoured with that solution, as I wish to keep traffic to a minimum, but it may e to that. – meshy Commented Jun 6, 2013 at 12:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

this script has a couple minor UX glitches that can be cleaned up, but it does acplish the basic task outlined when i tested it in chrome:

<input id=myinp />


<script> // bind handlers to input:
   myinp.onkeypress=myinp.onblur=myinp.onpaste= function vld(e){
     var inp=e.target;
     // count bytes used in text:
     if( encodeURIComponent(inp.value).replace(/%[A-F\d]{2,6}/g, 'U').length > 4){
        // if too many bytes, try to reject:
        e.preventDefault;
        inp.value=inp.val||inp.value;
        return false;
     }
     // backup last known good value:
    inp.val=inp.value;
   }

</script>

Throughout my own findings, I figured this works really well:

function limit_input(n) { // n = number of bytes
  return function(e) {
    const is_clipboard = e instanceof ClipboardEvent;
    if(is_clipboard && e.type != "paste") {
      return;
    }
    let new_val = e.target.value;
    if(is_clipboard) {
      new_val += e.clipboardData.getData("text");
    } else {
      new_val += e.key;
    }
    if(new TextEncoder().encode(new_val).byteLength -
       e.target.selectionEnd + e.target.selectionStart > n) {
      if(e.target.value == "" && is_clipboard) {
        const old = e.target.placeholder;
        e.target.placeholder = "Text too long to paste!";
        setTimeout(function() {
          e.target.placeholder = old;
        }, 1000);
      }
      e.preventDefault();
    }
  };
}

let el = document.getElementById("your_input");

el.onkeypress = el.onpaste = limit_input(4);

I started out with dandavis' answer and kept on improving it to adapt to all situations. I still don't think this is perfect, and it's still using the deprecated onkeypress handler, but nothing else worked better than this.

You can delete the part of the code that changes placeholder to say the text is too long to paste (delete the whole if, keep only e.preventDefault() in). It's just something I added myself to notify the user why the input is still empty after they try pasting something in. That way they won't blame me for writing faulty code and I won't have to answer a horde of plaints.

Create a function that returns the byte length of a string, then validate the input according to your requirements.

Here's an example that returns the byte length of a string:

function getStringByteLength(str) {
  str = typeof(str) === 'string' ? str : '';
  const byteSize = new Blob([str]).size;
  return byteSize;
}

Here's a fiddle that has a working example of calling the function above to validate two different text inputs.

If estimating isn't good enough, I'd filter all the non single-byte chars and count them.