크롬 개발자 도구를 보다 보니 다음의 메시지를 확인할 수 있었다.
An element doesn't have an autocomplete attribute
A form field has an id or name attribute that the browser's autofill recognizes. However, it doesn't have an autocomplete attribute assigned. This might prevent the browser from correctly autofilling the form.
To fix this issue, provide an autocomplete attribute.
내용인즉, 폼 필드(form field)에
autocomplete
속성이 없다는 것.
워드프레스에서
<form>
이 사용되는 곳은 기본적으로 댓글(comments)의 입력 양식이다. 해당 양식에 자동완성이 필요 없다면
autocomplete
속성을 안 넣는 것이 아니라
autocomplete off
속성을 넣어 주어야 하는 것 같다.
'문제' 항목에서 '위반 노드' 부분을 클릭하면 해당 요소가 있는 부분으로 이동한다. 크롬 개발자 도구가 지적하고 있는 부분은 댓글 입력 폼
<input>
에서 이메일(email) 부분이었다. 이를 해결하기 위한 코드를 만들어 보았다.
(*적용 테마: GeneratePress 무료 버전)
1. 코드 스니펫
Javascript
document.getElementById()
함수를 사용해 보았다.
<script>
document.getElementById('email').autocomplete = 'off';
</script>JQuery
JQuery의
.attr
함수를 사용해도 된다. JQuery는 slim minified 버전을 가져오도록 했다(releases.jquery.com). 만약 JQuery를 이미 사용 중이라면 마지막 줄의
.attr
함수 부분만 넣어주면 되겠다.
<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"></script>
<script>$( '#email' ).attr( 'autocomplete', 'off' );</script>
2. 코드 넣기
코드 넣는 위치에 대해서는 주의사항이 있는데,
id
가
email
인 부분을 찾아
autocomplete
속성을 넣어주는 것이기 때문에 댓글 양식이 로드된 다음에 위의 코드가 실행되도록 해 주어야 제대로 적용된다. 즉, 헤더
<head>
에 넣어 주면 댓글 부분이 아직 로딩되지 않은 상황이라 목표 지점을 찾지 못하고 끝나버린다. 물론 이 상황에서 Delay All JavaScript 등과 같은 옵션 등을 사용하면 해당 코드가 헤더에 있어도 마지막쯤에 실행되기 때문에 적용할 수는 있다. 이런 관계로 코드 스니펫을 넣는 플러그인을 사용 중이라면 댓글을 포함한 메인 콘텐츠가 모두 로딩된 뒤쪽 위치에 넣어 주자.
추가적인 고려 사항으로, 댓글은 일반적으로 포스트(single post)에만 설정하는 경우가 많기 때문에 위의 코드도 포스트에서만 작동되도록 하는 것이 좋을 것 같다.
위에 서술한 내용을 반영하여 functions.php에 넣을 수 있게 만들어 보았다. 참고로 자바스크립트 버전.
// email autocomplete off
function email_autocomplete() {
if(is_single()) {
echo '<script>
document.getElementById("email").autocomplete = "off";
</script>';
}
}
add_action( 'generate_after_main_content', 'email_autocomplete' );
3. 결과
이메일
<input>
에
autocomplete="off"
속성이 추가되었고 귀찮게 떠 있던 메시지가 사라졌다.
