Vue.js로 만든 양식을 Android Chrome과 iOS Safari에서 테스트하고 있다면 Safari에서만 텍스트 영역의 개행이나 공백이 무효가되는 사건을 발견.
아무리 검색해도 비슷한 화제가 히트하지 않고 조사에 시간이 걸렸기 때문에 정리해 보았습니다.

무슨 일이 있었는지

이렇게 입력하고 싶었는데 ...


이렇게 되었다

※ 텍스트 영역은 Vuetify를 사용

알파벳은 이상대로이지만, 문자를 입력하는 옆에서 개행이나 스페이스가 사라져 버렸다.
이 외, 스페인어나 한국어 등의 문자를 랜덤으로 시험했는데 알파벳과 같은 거동으로,
중국어는 일본어와 같았다.

왜・・・? ?

원인 조사

1. 전제 확인

평상시는 Android 유저이므로, 만약을 위해 iOS Safari로 전제를 확인.

1. iOS 메모장에서 개행 가능
2. HTML의 textarea로 개행할 수 있는 일
3. Vuetify의 v-textarea에서 줄 바꿈

모두 개행·공백이 유효한 것을 확인.

2. 줄 바꿈이 유효한 코드와 잘못된 코드를 비교

개행이 유효한 코드(Vuetify 공식 샘플보다 발췌)

Vuetify.vue

<v-textarea label="Label" value="value"></v-textarea>

줄바꿈이 잘못된 코드(내 코드에서 발췌)

MyCode.vue

<v-textarea label="Label" v-model.trim="value"></v-textarea>

→ v-model.trim 이 이상한 것 같아・・・

3. Vuetify의 CodePen을 Safari로 조작

아까 정상적으로 움직인 Vuetify의 value를 v-model.trim으로 바꾸면 ...
개행할 수 없게 되었다! ! !
게다가 v-model만으로 하면・・・
개행할 수 있었다! ! !

MyCode.vue

<!--これだと改行・スペースが無視される-->
<v-textarea label="Label" v-model.trim="value"></v-textarea>

<!--これだと改行・スペースが無視されない-->
<v-textarea label="Label" v-model="value"></v-textarea>

공간에 대해서도 비슷한 행동.

해결 방법

v-model.trim="str" 없이 v-model="str" 와 str.trim()

결론

Safari에서는 .trim 를 사용하면 일본어 입력 시 개행이나 공백 입력이 무효가 되는 경우가 있는 것 같습니다.
(영어라면 발생하지 않기 때문에 아무리 영어로 검색해도 나오지 않을 것입니다.)
진짜는 입력치 전체의 전후의 공백만 제거하는 기능의 일입니다만, 왜 입력중에 즉시로 제거해 가는 것일까요?
보다 자세한 원인은 .trim 의 사양이나 Safari의 텍스트 에리어의 거동이나 2 바이트 문자에 대해서 조사할 필요가 있을 것 같습니다만, 일단 각서까지・・・.
아시는 분이 계시면, 가르쳐 주실 수 있으면 다행입니다.