[react] input, textarea 등에서 영어 입력을 영대문자(uppercase)로 변환해 주는 샘플코드

By | 6월 28, 2023

커서 위치를 유지하는 것이 포인트


    ...
    onChange={(e) => {
        modifyUpperCase(e, forceUpperCase);
    }}
    ...

export const modifyUpperCase = (e: React.ChangeEvent<any>, forceUpperCase: boolean) => {
  if (forceUpperCase) {
    const et = e.target;
    const selectionStart = et.selectionStart;
    const selectionEnd = et.selectionEnd;
    et.value = et.value.toUpperCase(); // 조건에 따라 영대문자 변경
    et.setSelectionRange(selectionStart, selectionEnd); // 커서 위치 유지를 위한 작업
  }
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments