Focus Input field even when you click on a blank spot-CodePudding

I am currently building a search bar for my application. I have been looking everywhere reading documentations on focusing an input field and I found out that HTML has a built in function 'autofocus' but I have not been able to figure out a solution on how to focus on the input field when for example I click on a blank area on the web page.


            <input type="text"  id="myInput" onkeyup="myFunction()"   title="Type in a name" autofocus>

CodePudding user response：

I assume that your search bar should have the focus permanently. Even if the user clicks outside, the focus should not be removed. This is basically a very bad user experience and a bad design idea. Nevertheless, I will show you a possible solution.

You have already found the necessary attribute autofocus. This will cause your input field to automatically have the focus after the page is loaded. Now you have to prevent that the focus will be removed. You can achieve this with the onblur event. The onblur event occurs when an element loses his focus. When this event is fired, you just have to set the focus on the input field again.

<input type="text" id="example" name="example" onblur="this.focus()" autofocus>

Again, I strongly recommend not to use this implementation. Even if you think it is a solution to your problem, there will be a more useful approach.

CodePudding user response：

I hope this helps , I will not give too many explanations as it is extremely simple . (Comments in the code)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Focus</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    outline: none;
    font-family: 'Poppins', 'system-ui', 'sans-serif';
    font-weight: 300;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: #e2e2e2; 
}
::-webkit-scrollbar-thumb {
    background: #9a9a9a; 
}
::-webkit-scrollbar-thumb:hover {
    background: #b6b6b6; 
}
body {
    width: 100vw;
    height: 100vh;
}
#wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px auto;
}
#wrapper > header {
    display: inline-grid;
    grid-template-columns: 70% 30%;
    align-items: center;
    justify-items: center;
    background: #e7e7e7;
    border-bottom: 1px solid #c9c9c9;
}
#wrapper > header > div {
    grid-column: 2/3;
}
#wrapper > header > div > input {
    border-radius: 10vmin;
    border: 1px solid #d7d7d7;
    padding: 5px 10px;
    background: white;
}
#wrapper > section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#wrapper > section > div {
    width: 100%;
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#wrapper > section > div:nth-child(2) {
    background: #53a2e5;
}

</style>
</head>
<body>
<section id="wrapper">
    <header id="_header">
        <div><input type="text" name="search" id="searchInput" placeholder="Search..."></div>
    </header>
    <section>
        <div onclick="focusInput()">function focusInput() called by inline onclick="" in this div element</div>
        <div>Click here to defocus</div>
    </section>
</section>

<script type="text/javascript">
/////////////////////////////////////////
// 1º Method
// Adding a event listener at some element, in that case : header
const headerEl = document.getElementById('_header');
const inputEl = document.getElementById('searchInput');
headerEl.addEventListener('click', function() {
    inputEl.focus();
});
/////////////////////////////////////////
// 2º Method
// Calling it inline by onclick attribute
function focusInput() {
    document.getElementById('searchInput').focus();
}
/////////////////////////////////////////
</script>
</body>
</html>

Im begginer here , and on javascript , i dont know if this is the better way to do this .