CODEWITHSUNDEEP
javascript
aman
aman

Reputation: 391

Allow div to be clicked with 'onblur' event on input text

After 500 milliseconds from the text inserted into the input text, I'm opening a div under the input text which contains a div with the inserted text on it. When inserted text is clicked it should console.log the text, but it is not able to do so because the onblur event occurs before the click. I want to keep my onblur event. But with the onblur event I can't make the div clickable. Please help

index.html:

var input_timeout = undefined;

        document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
            clearTimeout(input_timeout);
            var val = this.value;

            input_timeout = setTimeout(function () {
                var to_add_to = document.querySelector("#navigation div");
                to_add_to.innerHTML = "";
                to_add_to.style.visibility = "visible";
                var div_to_put = document.createElement("div");
                div_to_put.style.visibility = "visible";
                div_to_put.id = val;
                div_to_put.innerHTML += "<font>" + val + "</font";
                div_to_put.onclick = function () {
                    console.log(this.id);
                }
                to_add_to.appendChild(div_to_put);
            }, 500);
        }

        document.getElementById("navigation").querySelector("INPUT").onblur = function () {
            this.value = "";
            document.querySelector("#navigation div").style.visibility = "hidden";
            document.querySelector("#navigation div").innerHTML = "";
        }
body {
            margin: 0;
        }
        #navigation {
            min-width: 620px;
            background-color: silver;
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
        }
        #navigation input {
            height: 30px;
            width: 200px;
            font-size: 15px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            display: block;
            margin: 10px 5% 0% auto;
            padding: 0px 28px 0px 5px;
            float: right;
        }
        #navigation div {
            width: 200px;
            height: 50px;
            position: absolute;
            top: 41px;
            right: 5%;
            color: orange;
            background-color: white;
            border: 1px solid orange;
            border-radius: 5px;
            visibility: hidden;
        }
        #navigation div div {
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 25px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <div id="navigation">
        <input type="text" name="Search">
        <div></div>
    </div>
</body>
</html>

Upvotes: 0

Views: 148

Answers (1)

ic3b3rg
ic3b3rg

Reputation: 14927

Unlike the onclick event, the onmousedown event is fired before the onblur event:

var input_timeout = undefined;

        document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
            clearTimeout(input_timeout);
            var val = this.value;

            input_timeout = setTimeout(function () {
                var to_add_to = document.querySelector("#navigation div");
                to_add_to.innerHTML = "";
                to_add_to.style.visibility = "visible";
                var div_to_put = document.createElement("div");
                div_to_put.style.visibility = "visible";
                div_to_put.id = val;
                div_to_put.innerHTML += "<font>" + val + "</font";
                div_to_put.onmousedown = function () {
                    console.log(this.id);
                }
                to_add_to.appendChild(div_to_put);
            }, 500);
        }

        document.getElementById("navigation").querySelector("INPUT").onblur = function () {
            this.value = "";
            document.querySelector("#navigation div").style.visibility = "hidden";
            document.querySelector("#navigation div").innerHTML = "";
        }
body {
            margin: 0;
        }
        #navigation {
            min-width: 620px;
            background-color: silver;
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
        }
        #navigation input {
            height: 30px;
            width: 200px;
            font-size: 15px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            display: block;
            margin: 10px 5% 0% auto;
            padding: 0px 28px 0px 5px;
            float: right;
        }
        #navigation div {
            width: 200px;
            height: 50px;
            position: absolute;
            top: 41px;
            right: 5%;
            color: orange;
            background-color: white;
            border: 1px solid orange;
            border-radius: 5px;
            visibility: hidden;
        }
        #navigation div div {
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 25px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <div id="navigation">
        <input type="text" name="Search">
        <div></div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions