div contenteditable에서 이미지 첨부시 포커스 옮기는 방법

contenteditable 속성을 가진 div 요소에 이미지를 첨부할 때 포커스를 옮기는 방법은 JavaScript를 사용하여 해결할 수 있습니다. 다음은 예시 코드입니다.

​

```html

<div id='editableDiv' contenteditable='true'></div>

​

<script>

const editableDiv = document.getElementById('editableDiv');

​

editableDiv.addEventListener('paste', function(e) {

e.preventDefault();

​

const clipboardData = e.clipboardData || window.clipboardData;

const items = clipboardData.items;

​

for (let i = 0; i < items.length; i++) {

if (items[i].type.indexOf('image') !== -1) {

const file = items[i].getAsFile();

const reader = new FileReader();

​

reader.onload = function(event) {

const img = document.createElement('img');

img.src = event.target.result;

​

// 이미지를 div에 추가

editableDiv.appendChild(img);

​

// 포커스를 div로 옮기기

editableDiv.focus();

};

​

reader.readAsDataURL(file);

}

}

});

</script>

```

​

위의 코드는 contenteditable 속성을 가진 div 요소에 이미지를 붙여넣을 때 발생하는 paste 이벤트를 감지하여 이미지를 div에 추가하고, 추가된 이미지가 있는 div로 포커스를 옮기는 기능을 구현한 것입니다. 이 코드를 사용하면 이미지를 첨부할 때 포커스가 div로 자동으로 옮겨집니다.

​

여기까지가 제가 준비한 답변입니다^^

답변확정 꼭 부탁드려요~!

contenteditable 속성을 가진 div에서 이미지를 첨부하고 포커스를 옮기는 방법은 JavaScript를 사용하여 해결할 수 있습니다.

​

먼저, 이미지를 첨부하는 버튼을 만들고 해당 버튼을 클릭했을 때 이미지를 선택할 수 있는 파일 선택 창을 열도록 합니다. 그리고 선택한 이미지를 div에 삽입하고 포커스를 옮기는 코드를 작성합니다.

​

아래는 예시 코드입니다:

​

```html

<div contenteditable='true' id='editableDiv'></div>

<button _onclick='attachImage()'>이미지 첨부</button>

​

<script>

function attachImage() {

// 파일 선택 창 열기

var input = document.createElement('input');

input.type = 'file';

input.accept = 'image/*';

input.onchange = function(event) {

var file = event.target.files[0];

var reader = new FileReader();

reader.onload = function(e) {

// 이미지를 div에 삽입

var img = document.createElement('img');

img.src = e.target.result;

document.getElementById('editableDiv').appendChild(img);

​

// 포커스를 옮기기 위해 div를 클릭

document.getElementById('editableDiv').click();

};

reader.readAsDataURL(file);

};

input.click();

}

</script>

```

​

위 코드에서는 contenteditable 속성을 가진 div를 id로 'editableDiv'로 지정하였습니다. 이미지를 첨부하는 버튼을 클릭하면 attachImage() 함수가 실행되고, 파일 선택 창이 열립니다. 선택한 이미지는 FileReader를 사용하여 읽은 후, div에 img 요소로 삽입됩니다. 마지막으로, div를 클릭하여 포커스를 옮깁니다.

​

열심히 답변드렸습니다!

답변확정해주시면 정말 큰 도움이 될것 같습니다.

좋은하루보내시구요!!