구글 크롬 wr_content is not focusable 오류

최근에 어떤 사이트를 보다가 글 작성 때 크롬에서 wr_content is not focusable. 과 비슷한 오류를 경험하게 됐다. focus 관련 스크립트 문제일 것이라 짐작하고 코드를 훝어봤는데 딱히 문제가 될 부분은 보이지가 않았다. 그래서 도대체 왜 그럴까? 한참을 생각하고 검색도 해보고 했는데.. 결론은 어이없을만큰 간단한 것이었다.

<div style="display:none;">
    <textarea name="wr_content" required></textarea>
</div>

위 코드를 잘 살펴보면 div 안에 textarea 가 있고 div는 display:none 상태이다. 이런 경우에 textarea 속성에 required 가 있는 이 속성 때문에 크롬에서 오류를 뿜어내는 것이다. required 속성을 사용하게 되면 최신의 브라우저에서는 입력값이 있는지를 체크해서 사용자에게 알려준다. 알려주면서 안내 메세지와 focus를 이동해서 이 필드가 문제입니다.. 이렇게 알려주는데.. div의 display:none 속성 때문에 화면에 표시되지 않으니까 focus를 줄 수 없다는 것이다.

또한 maxlength 등과 같은 속성을 지정해줬을 때도 오류가 발생할 수 있다고 한다.