What is the method to have text added automatically to an input field when a key is pressed?

Question

What is the method to have text added automatically to an input field when a key is pressed?

Within my navigation, I have implemented a "full-screen overlay search box". When users click on the magnifying glass icon, a full-screen overlay with a search input field appears. You can see an example image here: .

Currently, to enter text in this fullscreen search box, users need to click on the placeholder and then type their search query. I want to make it so that the input field automatically reacts and populates with text as soon as a key is pressed down.

I have provided some CSS code for styling purposes, but not sure how to achieve the auto-reactive behavior for the search box input field. Any help or guidance on how to implement this would be greatly appreciated!

javascript html css

Answer 1

Answer №1

There doesn't seem to be a navigation bar with a clickable magnifying glass, but you can create an HTML element that triggers a function to display an overlay.

Here is an example:

<nav>
   <ul>
   <li id="magnifying-glass"></li>
   (...)
</nav>

  <div id="overlay-content">
    <form action="/action_page.php">
      <input id="overlay-input" onblur="this.placeholder = 'Search'" onfocus="this.placeholder = ''" type="text" placeholder="Search" name="search">
    </form>
  </div>

<script>
   document.getElementById("magnifying-glass").addEventListener("click", function(e) {
       e.preventDefault();
       document.getElementById("overlay-content").style.display="block"; //assuming it was "none" before through css
       document.getElementById("overlay-input).focus();
   });
</script>

I typed this in SO's editor so there may be some syntax errors, but the important part is using the .focus() function after displaying the overlay to achieve the desired functionality.

For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Answer 2

There doesn't seem to be a navigation bar with a clickable magnifying glass, but you can create an HTML element that triggers a function to display an overlay.

Here is an example:

<nav>
   <ul>
   <li id="magnifying-glass"></li>
   (...)
</nav>

  <div id="overlay-content">
    <form action="/action_page.php">
      <input id="overlay-input" onblur="this.placeholder = 'Search'" onfocus="this.placeholder = ''" type="text" placeholder="Search" name="search">
    </form>
  </div>

<script>
   document.getElementById("magnifying-glass").addEventListener("click", function(e) {
       e.preventDefault();
       document.getElementById("overlay-content").style.display="block"; //assuming it was "none" before through css
       document.getElementById("overlay-input).focus();
   });
</script>

I typed this in SO's editor so there may be some syntax errors, but the important part is using the .focus() function after displaying the overlay to achieve the desired functionality.

For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

What is the method to have text added automatically to an input field when a key is pressed?

Answer №1

Similar questions

Retrieve information from the pouchdb database

Passing Information to VueJs Modal Component

Sending an AJAX request to submit a form and receiving a response

Express JS causing NodeJS error | "Issue with setting headers: Unable to set headers after they have been sent to the client"

Changing the element tag and flipping escape characters in html entities

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

What is the process for adding JSON object data to an existing JSON file using an HTML input form?

Guide to making a sidebar navigation menu on the left using Bootstrap

Is it possible to customize the border spacing for individual cells?

How can jQuery grep be used with dual arrays?

Is it possible to create a new field in mongoDB from a separate collection without any dependencies?

divide the information within an HTML table cell

JavaScript: Creating Custom IDs for Element Generation

Assistance Needed with XPATH and CSS for Selenium Automation

Ways to resolve eslint typedef error when using angular reactive forms with form.value

The Javascript query is returning an [object Object] data type

Incorporate the teachings of removing the nullable object key when its value is anything but 'true'

Issues with Jquery Autocomplete feature when using an Input Box fetched through Ajax requests

Is there a way to automatically update the URL to include $_GET['data'] (media.php?data=123) when a selection is made from a dropdown list?