CODEWITHSUNDEEP
htmlinputunicodeemoji
mahemoff
mahemoff

Reputation: 46419

Making a 1-character HTML input field that accepts Emoji

I'm trying to make an input field of 1 character, but I'm finding it's impossible to paste Emoji or use the OSX emoji picker launched by the browser.

<input maxlength='1' value='👼'>

The emoji is shown and it's possible to paste in a 3-byte Unicode like ★, but not another Emoji. It also works fine for a maxlength of 2.

Is this a browser bug or is it compliant with HTML spec? I'm seeing same on Chrome and Firefox.

Demo

Upvotes: 4

Views: 2197

Answers (1)

Robin Houston
Robin Houston

Reputation: 299

This behaviour is compliant with the HTML spec. The definition of the maxlength attribute says:

Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the code-unit length of the element's value is greater than the element's maximum allowed value length, then the element is suffering from being too long.

(My emphasis.) As a general rule, the web platform treats strings as sequences of 16-bit code units, rather than as sequences of Unicode characters, so characters such as emoji that are outside the basic multilingual plane are treated as having length two.

The obvious workaround is to set maxlength=2 (or ditch it altogether) and do the validation in JavaScript.

Upvotes: 5

Related Questions