How can I do like, when my cursor leave input field, a function is triggered which change input background color. I was trying to do like this, but did not work well.
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="name" onchange="changeColor()">
<script>
function changeColor() {
const x = document.getElementById("name");
x.style.background = "red";
}
</script>
</body>
</html>
function changeColor(ev) {
ev.target.style.backgroundColor = "red";
}
You can use the blur event to target specifically the lose of focus:
Enter your name: <input type="text" id="name">
<script>
const x = document.getElementById("name");
x.onblur = changeColor;
function changeColor() {
x.style.background = "red";
}
</script>
Try the onmouseleave event listener. onchange usually involved the value of the input field changing.
In CSS you have :focus selector to style based of if the input is focused or not