Question 35757 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Focus Input field even when you click on a blank spot – Jquery

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" class="form-control srch-bar" id="myInput" onkeyup="myFunction()"   title="Type in a name" autofocus>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    I will not give too many explanations as it is extremely simple. I’ve added 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>

    I’m a beginner, and using JavaScript I don’t know if this is the better way to do this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search