요소의 maxlength 를 이모티콘에도 대응시킨다

사로 게이트 쌍 문자열에 대한 대응이 최근의 JS에서는 의외로 간단하게 할 수 있게 되었기 때문에 기억합니다.
덧붙여서 IE 는 비대응이므로, IE 대응이 필요한 분은 진심을 내 주세요.

[추기] 타이틀이 미묘하게 거짓말을 하고 있었습니다. maxlength 는 사용하지 않고, 최대 입력 문자수의 제어를 합니다.

서로게이트 쌍 문자열을 올바르게 계산

NO GOOD

'𥹖𥹢𥹥'.length // 6
'𥹖𥹢𥹥'.split('').length // 6

오 K

[...'𥹖𥹢𥹥'].length // 3
Array.of(...'𥹖𥹢𥹥').length // 3
'𥹖𥹢𥹥'.match(/./ug).length // 3

참고로 다음은 <input> 요소에 대리자 쌍 문자열을 입력하면 maxlength가 제대로 작동하지 않는 문제를 이 방식을 사용하여 개선한 샘플입니다. Vue로 구성 요소가 있습니다.

See the Pen TextInput by Eiji Meguro ( @megurock )
on CodePen .

서로게이트 쌍 문자열의 문자 코드를 올바르게 얻습니다.

String.prototype.charCodeAt() 대신 String.prototype.codePointAt() 을 사용합니다.

NO GOOD

오 K

서로게이트 쌍 문자열을 문자 코드에서 올바르게 표시

String.fromCharCode() 대신 String.fromCodePoint() 을 사용합니다.

NO GOOD

오 K