하나의 웹페이지 안에서 특정 위치로 포커스 이동, focus() 와 location.hash

웹페이지 UI 를 만들다 보면, 프로세스 상 어딘가가 화면에 꼭 보여야 하는 수가 있지요.
이런건 focus 내장함수를 사용하면 됩니다.
input 태그가 있는 경우 해당 태그에 focus() 함수를 사용하여 이동이 가능합니다.
input 태그의 type 옵션에 text, radio, checkbox 등이 들어 있어도 공히 적용이 됩니다.
textarea 태그에도 focus 가 먹힙니다.

그런데.. input 태그나 textarea 태그에 disabled 옵션이 걸려 있다면 대략 낭패.
스크립트가 작동을 하지 않습니다. readonly 옵션은 영향력이 없습니다만..
업무상 disabled 옵션이 필요하다면 focus() 함수를 통한 위치이동은 불가합니다.
input, textarea 태그가 없는 곳으로 이동하는 것도 focus() 함수가 먹지를 않지요.
그렇다면 방법이 없느냐..?

<a> 태그에는 name 이라는 옵션이 있어서 아래와 같은 코드가 존재하는 경우,
URL 뒤에 #nameA 라고 붙이면 <a> 태그가 설정된 곳이 화면에 노출됩니다.
<a name="nameA"></a>
<a> 태그의 href 옵션값에 [URL]#nameA 와 같이 하면 화면이 이동됩니다.
<script>location.href="[URL]#nameA";</script> 와 같이 해도,
화면 전환이 되면서 특정 위치로 이동합니다.

그런데.. URL 에 # 을 사용하여 위치를 지정하는 방식은 화면 전환이 이루어지는데..
화면이 바뀌지 않으면서 특정 위치로 움직이게 하려면..?
이럴땐 location.hash 를 사용합니다.
<script>location.hash='nameA'</script> 와 같이 사용하는 것이지요.

그런데.. location.hash 를 사용했을때 작동하지 않는 경우도 있습니다.
약간 의외이지요..? 원래 작동해야 하는데, 아무 낌새도 없으면 완전히 돌아버리지요.
<a name="..." /> 의 위치 때문인데요..
텍스트가 없이 태그들만 존재하는 곳에서는 작동하지 않는 것이지요.
이를테면 아래와 같이 하면 location.hash 가 작동하지 않습니다.
...<table ...><a name="..." /><tr>...
...</tr><a name="..." /></table>...
...<td ...><a name="..." /></td>...
물론, ...<tr ...><a name="..." /><td>... 에서는 작동합니다.
당연히 </td><a name="..." /></tr> 에서도 작동합니다.

상기 코드들이 작동하게 하려면 아래와 같이 해당 공간에 텍스트가 들어가면 됩니다.
textA 는 임의의 문자 또는 문자열을 제시한 것입니다.
textA 가 <a name="..." /> 태그 앞에만 있든 뒤에만 있든, 양쪽에 모두 있든 제대로 작동합니다.
...<table ...>textA<a name="..." /><tr>...
...</tr>textA<a name="..." /></table>...
...<td ...>textA<a name="..." /></td>...

공백문자를 앞이나 뒤, 또는 앞뒤에 모두 넣는다구요..? 웹브라우저가 공백을 무시하기 때문에 소용이 없지요.
반드시 문자나 문자열을 넣어야 하지요.

추가> <a href="..." target="_blank">...</a> 와 동일하게 사용하려면,

window.open('about:blank').location.href='...'; 와 같이 사용.