[WEB] div 를 input 태그처럼 사용하기 (div contenteditable, contenteditable 커서 맨뒤로)

div 태그를 input 태그처럼 사용하고싶어요

---

div 태그에 내용을 직접 입력하는 input 태그 형태로 만들고 싶다면 contenteditable 을 사용하면 된다

<div contenteditable=‘true’>내용</div>

내용은 input 태그의 value 라고 생각하면 된다

placeholder 를 사용하고싶어요

---

div 태그에 아무리 placeholder 를 줘도 동작하지 않는것을 확인할 수 있다.
그럴땐 div 태그에 원하는 placeholder 를 적어주고 style 태그에 아래의 내용을 넣어주면 된다

<div
contenteditable
placeholder=“아무런 내용이 없어용”> </div>

이렇게 작성하고 css style 부분에 이렇게 적어주면 된다 !

 [contenteditable]:empty:before {
   content: attr(placeholder);
 }

만약 contenteditable=‘true’ 이렇게 써줬으면
style 태그에도
[contenteditable=‘true’]:empty . . . .
로 작성하면 된다

contenteditable 커서가 맨 앞으로 이동해요

---

contenteditable 내용을 넣을 때 커서가 계속 맨 앞으로 이동해서 엄청난 스트레스를 받았따
이것은 element 의 value 를 바꾸려고 할 때 나타나는 현상이다
그래서 커서를 맨 뒤로 보내주기 위해 javascript(typescript) 에서

window.getSelection()?.collapse(element, 1);

window.getSelection() 을 사용해줬다 여기서 element 는 oninput 이벤트가 발생한 객체이다

function inputevent(e:Event){

const element= e.target as HTMLElement
element.innerText = element.innerText.replace(정규표현식,‘’);
window.getSelection()?.collapse(element, 1);

}

하지만 단점이 있는데 이런 형태의 코드는 글의 중간에 내용을 넣고 싶을때 하나 입력하면 다시 커서가 뒤로 가버린다는 단점이 있다
그런 경우에는 현재 커서의 위치를 저장하고 입력때마다 불러와서 하는 방식이 있다고 하는데 현재 나에게 필요한 방법은 아니라 사용해보지는 않았다
만약 필요하신 분이 있다면 ‘현재 커서 위치 저장 후 입력때마다 불러오기’ 이런식으로 검색해보면 좋을거같다

끗

틀린거나 질문은 언제가 환영합니다