I have a simple input and an SVG-pic that sends the input-text to a server and instantly adds the text into a document.createElement('div')...etc
Is there a way to make my SVG-pic non-focusable so it doesn't steal focus from others (in my case - my input)
upd.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
<input id="senderInput" type="text">
<img src="../../img/Calendar.svg" alt="" onclick="imgClick(event)">
</div>
</div>
</body>
</html>
.wrapper {
max-width: 300px;
margin: 0 auto;
}
.wrapper > div {
width: 250px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background-color: var(--divBG);
margin: 20px;
}
arr = ['#f00', '#aaa004', '#b70808', '#0855b7', '#681a73', '#d56e00']
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.wrapper > div').forEach(d => {
d.style.backgroundColor = arr[getRandomInt(6)]
})
});
function j(arg) {
return document.querySelector(arg)
}
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function imgClick(e) {
j('.wrapper > div').innerText = j('#senderInput').value
setTimeout(() => {
var dd = document.createElement('div')
dd.style.backgroundColor = arr[getRandomInt(6)]
dd.innerText = '234'
j('.wrapper').appendChild(dd)
}, 100);
j('#senderInput').focus()
}