How does the code behind the html maxlength attribute works

Question

I am using HTML maxlength attribute in my mobile application but it is not working. I tried several other ways to limit the maximum length in input[type=text] but none of them is working as good as maxlength works in web browsers. So I want to know the coding logic behind maxlength attribute.

Answer 1

I understand that you're only interested in understanding how maxlength is supposed to work. Here's a quote from the specification:

4.10.5.3.1. The maxlength and minlength attributes

The maxlength attribute, when it applies, is a form control maxlength attribute controlled by the input element’s dirty value flag.

The minlength attribute, when it applies, is a form control minlength attribute controlled by the input element’s dirty value flag.

If the input element has a maximum allowed value length, then the code-unit length of the value of the element’s value attribute must be equal to or less than the element’s maximum allowed value length.

Source: §4.10.5.3.1

If a browser you're testing isn't complying with spec, submit a bug report to that browser. In the meantime, you could use javascript to enforce a maximum length.

However, even if you do enforce this on the client-side, you still need to enforce it server-side too, because it is easy to hack client-side code and circumvent all intended limitations before sending to the server.

Answer 2

Quoting MDN here:

The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

I see you tagged JavaScript...So, your problem is likely that maxlength doesn't prevent programmatic changes from exceeding that number of characters. For example:

document.querySelector('input').value = 'testing'

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

...So, you will likely need to manually handle maxlength in your code. Perhaps something like this:

// NOTE: Truncates based on maxlength
const setTextInputValue = (el, str) => {
  const maxlength = +el.getAttribute('maxlength')
  el.value = str.substring(0, maxlength)
}

const el = document.querySelector('input')
setTextInputValue(el, 'testing')

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