Ways to clear a placeholder each time you leave a search box event

I have implemented an overlay search box with the placeholder "Sök," and I want the text entered by the user to be removed and the placeholder to be reset if the user exits the search box by clicking the 'x' in the upper right corner. How can I achieve this functionality? Code:

body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}

// CSS code here...

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
    // Head content here...
  </head>
  <body>

<header>

<div class="container">
<nav>
  <ul>
    <li><a href="#">Butiker</a></li>
    <li><a href="#">Resturang & Café</a></li>
    <li><a href="#">Utbyggnad</a></li>
    <li><a href="#">Öppetider</a></li>

    // HTML code here...

   <i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>

   <script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}

// JavaScript code here...

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

      <i class="fas fa-bars"></i>
  </ul>
</nav>
</div>
</header>

  // More HTML content...

  <body>
</html>

Answer №1

To make the placeholder reappear when the closing button is clicked, you can reset the input value back to nothing:

const closeButton = document.querySelector( 'button' );
const inputField = document.querySelector( 'input' );
closeButton.addEventListener( 'click', event => {
  inputField.value = '';
});
<input type="text" placeholder="Enter text">
<button>Close</button>

Answer №2

One way to clear the value of an element is by using the setValue('') method.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The child element with the specified position within the id element

Is it possible to highlight 'The second paragraph' of p id="dd" using nth-child? I noticed that when I add "#dd" in styles, it stops working properly. <!DOCTYPE html> <html> <head> <style> #dd p:nth-child(3) { back ...

Implementing a full-width search bar within the Bootstrap navbar

I'm trying to create a navbar using Bootstrap 3.7.7 with a logo on the left, links on the right in two rows, and a large search bar in the center. I've managed to align the logo and links correctly, but I'm struggling with sizing the search ...

Utilize Apollo to retrieve a variety of queries at once

Currently, I'm utilizing nextJS for my frontend development along with Apollo and GraphQL. For fetching queries, I am using the getStaticProps() function. To enhance modularity and maintainability, I have segmented my queries into multiple parts. The ...

Exploring the fundamentals of Django with a touch of creativity in CSS

As a newcomer to Django, I am currently working on setting up a basic Django application. I have progressed to chapter 5 in the Django online book: Before delving into databases, my goal is to incorporate some simple CSS and JS directly into the applicat ...

Transforming a JSON object into a list in C#

After exploring similar posts without success, I am reaching out here for help. I have a Json data stored in a hidden field that I am trying to access in the code behind file of my markup page. My goal is to convert this Json into a List and bind it to a ...

Using d3 or ajax to read a local file containing tab-separated values may result in a syntax error appearing in the Firefox development console

The reading operation is functioning as expected. However, I encountered a syntax error in the Firefox console while going through multiple files, which can be quite tedious. These files are annotation files formatted like (time \t value) with no head ...

Initial argument for the event listener

If I have event handlers registered inline in my markup (even though it's deprecated) like span id="..." onclick="foo(p1,p2,p3)" how do I access the "event" object in the event handler function foo? Is changing the above to span ...

Searching for documents in MongoDB using a reference field

I'm working with two Mongo schemas: User: { _id: ObjectId, name: String, country: ObjectId // Reference to schema Country } Country: { _id: ObjectId, name: String } My goal is to retrieve all users who are from "VietNam". Could you provi ...

Eliminating the vertical scroll on a webpage with the help of Bootstrap 5's responsive design capabilities

I've been tasked with converting a Figma design into an HTML page using Bootstrap 5. Take a look at the Figma design: https://i.sstatic.net/jo5Si.png However, there's an issue causing a vertical scroll bar to appear on the page. The culprit see ...

Two-column list using XSLT

I am seeking assistance with xsl transformation. The xml generated by SharePoint Server control is as follows: <rows> <row>A</row> <row>B</row> <row>C</row> <row>D</row> <row>E ...

Timeout error occurred in Async.js because the callback was already triggered

Whenever I execute index.js, I encounter an ETIMEDOUT or ECONNRESET error followed by a Callback was already called error. Initially, my assumption was that the issue stemmed from not including a return before calling the onEachLimitItem callback. Consequ ...

Steer clear of altering line spacing in CSS

Here is the HTML structure that I am working with: <div id="id1"> <h1>my name </h1><h3><a href="mailto:myemail_id"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff92869a929e9693969bbf878685d19 ...

Click event from Angular Material menu is triggered twice on mobile devices

After implementing a basic angular material side menu from the demo, I noticed that all click events are being fired twice on the entire page when viewed in mobile browsers. This issue can even be replicated in the Chrome emulator. (To reproduce, enable th ...

How can you exclude selected values in React-select?

Here is how I have defined my select component: this.state.list = [{label: "test1", value:1}, {label:"test2", value:2}, {label:"test3", value:3}] this.state.selected = [{label:"test2", value:2}] let listMap = this.state.list let list = this.state.list { ...

Solving the issue of .css being blocked due to MIME type while building tailwind is a common problem faced by

https://i.stack.imgur.com/nrDgJ.png While working on my tailwind CSS project, I ran npm run build. However, upon opening the built index.html file, I noticed that the CSS file was not loading properly. How can I resolve this issue? I am unsure of what st ...

Troubles with Borders and Padding in HTML Elements

Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the ...

Is it possible to create a Nuxt.js static website that incorporates a dynamic single-page application built with Vue.js

Currently researching Static Site Generators for a client project, I discovered Vue.js and Nuxt.js, which appear promising. Given the choice between Vue.js and React, I lean towards Vue at the moment. The client's website consists of 120 pages with s ...

Even after defining routes, Node Express continues to throw a 404 error

It appears that troubleshooting this issue may be challenging without providing more context. Here is the setup I have in a compact modular configuration: //index.js also known as the server ... // defining views path, template engine, and default layou ...

Adjust the placement of a small division within a larger resizable division without affecting the contents of the container

Check out this JSFiddle I created: http://jsfiddle.net/asaakius/5nGYS/7/ In the code, you'll see a small div with the id #menu containing the letter "v". When I remove this div, the textarea and textbox align perfectly and resize together seamlessly. ...

Is it feasible to exclude certain CSS files in an HTML Master page within the .NET framework?

On my website, I have 6 CSS files linked, but on a specific page, I only need to use 3 of them. Our developers are using a master page in .NET and are hesitant to make changes to it. Therefore, I am wondering if there is a way to exclude certain linked C ...