[javascript]div태그를 input처럼 사용하고 전체 선택 설정

안녕하세요 오늘은 제가 현업에서 근무하며 생긴 이슈를 처리하는 과정에 대해 

설명하고 비슷한 이슈가 있을때 좀 더 편하게 처리 하시라는 의미로 작성합니다 

 

간혹 사용자입력을 받는 영역을 지정해놓고 input 태그를 이용해서 대부분 사용 하실 거라 생각합니다 

그렇지만 div 태그에 텍스트가 들어가있는 경우가 있습니다 

input태그 처럼 사용하는것이지요 일단은 div 태그를 input 처럼 사용하는 속성은

 

contenteditable='ture' 입니다

 

<tr>
	<td>내용1<td>
    <td>내용2<td>
    <td> <div contenteditable='true'>숫자</div> <td>
</tr>HTML

이런 상태이면 숫자 라는 택스트를 수정 할 수 있게 됩니다 input과도 같은 느낌이죠 ㅎㅎ 

근데 저에게 생겼던 이슈는 기존에 저 태그에 content 속성만 들어가있는게 아니라 다른것도 하나 더 끼어있었습니다

저 div에 onfocus 이벤트가 발생하면 ctrl + a 를 누른것처럼 전체 선택이 되어서 사용자가 수정하기 편하게 되어있었죠

그 코드는 바로 이렇습니다 

<td> <div contenteditable='true' onfocus='document.execCommand("selectAll", false, null)' >숫자</div> <td>HTML

일단 작동은 합니다 근데 문제는 전체 선택이 팝업 창 전체를 드래그 한 것 처럼 선택 해버립니다 

제가 원하는건 input처럼 숫자 라는 택스트만 전체 선택이 되어야 하는데요 ;

 

결론은 함수를 사용하여 수정 했고 그 함수는 이와같습니다 노드를 찾아서 선택하는것입니다 

<td> <div contenteditable='true' onfocus='sctText(this)' >숫자</div> <td>HTML

function sctText(element){

	let range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllranges();
    window.getSelection().addRange(range);

}JAVASCRIPT

이처럼 작성하여 사용하면 정상적으로 div 태그내에 텍스트에 포커스 하면 그 택스트 전체가 블럭 지정이 되기때문에 

정상적으로 동작하게 됩니다 ㅎㅎ

 

document.execCommand 는 대부분 텍스트를 클립보드에 복사 하려고 쓴다고 합니다 ㅎㅎ

텍스트 전체선택과는 거리가 좀 있는 기능인것 같아 수정 완료했습니다 감사합니다