ios input Regex 버그관련.....

Question

react 로 만들어진 웹을 webapp 형식으로 사용하고있는데..input -> onchange -> regexp(검증) -> setvalue 이순서입니다만.. 너무 간단한 코드기도 하고, ios 제외한 모든 환경에서 정상 동작합니다만ios에서만 가운데 공백을 몇번 추가할 경우 문제가생깁니다.예로는) 테스트라는 글자에 커서위치를 스ㅣ트 이렇게 놓고 띄워쓰기를 몇번하면기대하는 결과는 테스 ㅣ트 겠지만 ios 환경에서는 한번만 띄워쓰고 커서가 트끝으로 이동해버립니다.ios 결과 테스 트 ㅣ 이런식으로요..원인을 아시는분계실까여?regexp 를 지우면 ios 에서도 기대하는 결과가 반영이됩니다.사용하는 정규식입니다.const allowedRegex &#61; /^[a-zA-Z가-힣ㄱ-ㅎㅏ-ㅣ\s]&#43;$/;

더미 · Answer

사파리 크롬 둘다 그런건가요?

HJOW · Answer

https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group참고요.그밑 댓글들 It seems that Safari is not yet compliant with the 2018 standard. There's a bug report here that is over 4 years old!– Lonnie BestCommentedOct 20, 2021 at 6:49Year 2022. Still an issue with Safari– DanielCuadraCommentedApr 25, 2022 at 18:49sometimes I wonder what goes on at apple– rednoyzCommentedOct 13, 2022 at 7:13Hey, I'm from future, 2167 outside, still an issue– maveriqCommentedOct 29, 2022 at 14:38Year 2023. Still an Issue with Safari, lol.– telionCommentedJan 5, 2023 at 16:17이게 뭔내용이냐사파리는 2018년 표준을 아직 따르지 않는다. 버그 리포트에 제보를 했다.2023년인데 아직도 똑같다.참고로 iOS 내 웹뷰는 사파리로 동작한답니다.

핸호 · Answer

input 이벤트에 따라 setvalue를 하는 방식은 iOS냐 아니냐를 떠나서, 지양해야하는 안티패턴입니다. 특히 한글과 같이 composition 개념이 있는 문자들(문자들간의 조립 프로세스가 중간에 들어가는 경우)의 경우에는 더 많고 다양한 문제를 발생 시킵니다. 이게 정확히 얘기하면 브라우저 단에서 뿐만 아니라 키보드 환경에 따라서 다릅니다(즉 디바이스마다 다릅니다..)가장 정석은 인풋 텍스트의 값을 강제로 바꾸는게 아니라, invalid 할 경우 submit 버튼을 막고, 아래 에러메시지를 표현하여 유저 스스로 고치도록 하는 것입니다. (Google Material Design 등 대부분의 디자인 시스템이 이런 방식을 채택하는 이유가 있습니다.)그럼에도 불구하고 입력과 동시에 입력 자체를 막고 싶으시다면..- change 이벤트가 아니라 keydown 이벤트를 받아서, allow key가 아닌경우 event.preventDefault()를 하는 방법- change 이벤트 발생시 input.selectionStart(커서의 위치값) 저장 -> setvalue -> setTimeout(0) -> 저장된 커서 위치로 커서 위치 복원등이 가능하긴 할 텐데 둘 다 side effect가 있어서 좋은 방법이라고는 못 볼것 같습니다.

ios input Regex 버그관련.....

3개의 답변

Q&A 목록