새로 (자동) 렌더링된 DOM 요소에 초점을 어떻게 설정합니까?

Question

사용자가 입력한 문자 수에 따라 자동으로 텍스트 영역과 동일한 콘텐츠로 바뀌는 입력 필드가 있습니다.

으아아아

제가 겪고 있는 문제는 사용자가 21번째 문자를 입력하면 포커스가 사라진다는 것입니다. 따라서 사용자가 22번째 문자를 입력하면 해당 문자가 텍스트 영역에 나타나지 않기 때문에(포커스가 없음) 짜증이 납니다. 새로 렌더링된 텍스트 영역에 어떻게 초점을 설정할 수 있나요? 여기서 문제는 자동으로 렌더링된다는 것입니다. 그렇지 않으면 텍스트 영역에 참조를 설정하고 focus()를 호출할 수 있습니다.

또 다른 문제는 21번째 문자를 제거하고 텍스트 영역에서 입력 요소로 다시 전환하는 것입니다.

Answer 1

(도움이 될 수 있으니 내 댓글을 복사하세요.)

textarea 替换 input 元素可能会产生糟糕的用户体验。为什么不从一开始就使用 textarea어때요? 입력 길이에 따라 스타일을 변경하려는 경우(예: 20자를 초과하는 경우 높이를 늘리는 경우) CSS를 사용하면 됩니다.

으아악 으아악

Demo(@tony19에서 포크)

Answer 2

다음 구성 요소에 표시된 대로 textarea/input 包装在组件中，并使用其 mounted 挂钩来调用其 focus()를 사용할 수 있습니다.

으아악 으아악

데모

기술적으로는 가능하지만 이 사용자 경험은 이상적이지 않을 수 있으므로 이와 같은 중앙 집중식 입력이 필요하지 않은 다른 디자인을 고려해야 합니다(@kien_coi_1997 제안).