Concealed visual revealed through Javascript within a selected textbox

Is there a way to change the visibility of an image inside a textbox? I would like the placeholder text to become invisible when I select the "search" textbox. Can we achieve the same effect with a picture inside the textbox?

Here is the code:

<div id="ricerca">
                  <form >
                  <input type="text" class="ricerca" value="Search" onblur="if (this.value == '') this.value ='Search';" onclick="if (this.value == 'Search') this.value ='';"  >
                  <input type="submit"  id="lente" class="lente"  value="show" style="border:none;">
                  </form> 
</div>

You can check out the link here:

javascriptjqueryhtmlcss

Answer №1

Discover a helpful jQuery function below

$(".search").click(function() {
  $("#lens").hide();
 });
$(".search").focusout(function() {
  $("#lens").show();
  $("#lens").css('marginTop',"-22px");
 });

Explore the live demo JSFIDDLE DEMO

Answer №2

Can you tell if this is functional?

<style type="text/css">
input.image-placeholder{
    background-image:url("image path");
    background-repeat:no-repeat;
    background-position: center left;
}
</style>

<div id="ricerca">
              <form >
              <input type="text" class="ricerca" value="Search" onblur="if (this.value == '') this.className= this.className + ' image-placeholder';" onclick="if (this.value == 'Search') this.className='ricerca';"  >
              <input type="submit"  id="lente" class="lente"  value="show" style="border:none;">
              </form> 
</div>

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

Setting up a textarea tooltip using highlighter.js

I'm experimenting with using highlighter.js within a textarea. I've customized their sample by substituting the p with a textarea enclosed in a pre tag (for right-to-left language settings). <div class="article" style="width: 80%; height: 80% ...

javascriptjqueryhtmltooltip

What are the Javascript Keycodes for the letter 'a' - is it 65 or

I am currently working with JavaScript on my MacBook Pro running OSX 10.11.x, using the Chrome browser. The function I am using is: window.onkeypress = function(e) { var key = e.keyCode ? e.keyCode : e.which; console.log("keypressed = " + key); } ...

javascriptkeycode

I'm having trouble customizing the appearance of a Tab Panel using the TabsAPI. The panel keeps expanding in strange ways. How can I

Trying to customize the Tabs component from MUI is proving to be a challenge. The main issue I am facing currently is: Whenever I switch between tabs, they appear to expand in size mysteriously. This behavior seems to occur only on tabs with more content ...

javascriptreactjsmaterial-uicomponentsjsx

The WebForms feature is failing to include the email input type in the form after autopostback

On my page, I have an input field using asp:TextBox: <asp:TextBox ID="edEmail" runat="server" /> The form submission is done using a standard <asp:Button>: <asp:TextBox ID="edEmail" runat="server" /> <asp:Button ID="bbOK" Text="Save ...

asp.nethtmlwebforms

Generate a new entry and its linked data simultaneously

The Issue: Picture this scenario: I have two connected models, Library which has multiple Books: var Library = sequelize.define('Library', { title: Sequelize.STRING, description: Sequelize.TEXT, address: Sequelize.STRING }); var Boo ...

javascriptsqlnode.jsdatabasesequelize.js

I aim to establish a connection between an API using HTTPS to communicate with an API

I am struggling with the code below: $.getJSON('http://www.mindicador.cl/api', function(data) { var dailyIndicators = data; $("<p>", { html: 'UF : $' + dailyIndicators.uf.valor + ...

jqueryajaxhttphttpsmixed-content

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

Create identical buttons using Bootstrap 4

I am trying to create uniform left and right buttons, but I am facing issues with making them look the same on both PC and mobile devices. Here is the current appearance: View the current button design <h3> <a href="" ...

htmlcsstwitter-bootstrapbootstrap-4

Selecting a color in Vuetify's color picker triggers the @

I have incorporated the Vuetify color picker into my project for changing the background and text colors of elements. Currently, I am storing the hex color values in Firestore by using the @input="updateColor" attribute on the v-color-picker to t ...

javascriptvue.jsvuetify.jscolor-picker

Having trouble drawing two lines in Highcharts? Is the JSON format invalid?

I am attempting to plot 2 lines on a graph using Highcharts. The PHP server-side file is as follows: require_once('Connections/conexion.php'); $sesionUser = $_SESSION['MM_Username']; $sesionIdGrupo = $_GET['idGrupo']; $sesio ...

javascriptphpmysqljsonhighcharts

Stream video files using NodeJS and seamlessly switch between audio tracks

I am looking to stream a video on my PC through a browser using nodejs. I found a helpful guide on how to achieve this using express, which can be found at this link: https://medium.com/better-programming/video-stream-with-node-js-and-html5-320b3191a6b6 (P ...

javascriptnode.jsexpressmp4

Marionette stores a collection for various item views

I am currently working on a project involving a composite view called QueueItems, with each item in the collection having its own itemView for modification. The challenge lies in allowing each element to select from multiple tag collections like States, Co ...

javascriptajaxbackbone.jsmarionette

Before invoking the .load() method, it's important to verify if the element is present on

I am currently utilizing jQuery's .load() method to dynamically modify page content. My goal is to verify if the content I intend to load actually exists. Using an example from the jQuery documentation: $( "#new-projects" ).load( "/reso ...

jqueryajax

Unable to communicate with the server-side controller using Angular

Encountering issues when attempting to call a server-side controller using AngularJS, these two error messages are being displayed. The parameters dictionary contains a null entry for parameter 'problemId' of non-nullable type 'System.Guid& ...

javascriptc#angularjs

Problem with the $http module in Angular 1.2

Recently, I started incorporating Angular 1.2.0 into my development application and encountered an issue with a particular function not working as expected: var myItems = angular.model('myItems', []); myItems.controller('itemsController&ap ...

javascriptangularjs

Increase division height when mouse hovers over it

I want the height of the div to be 50px by default and change to 300px onmouseover. I have implemented this as follows: <style type="text/css"> #div1{ height:50px; overflow:hidden; } #div1:hover{ height:300px; } </style> <body> <div i ...

javascriptjqueryhtmlcss

Uncertainty surrounding the concept of JavaScript objects

What is the reason for this not functioning properly? function displayValue(a,b){ this.a = a; this.b = b; $('p').text(a + " " + b); } var display = new displayValue(); display('1','2'); How does this still work ...

javascript

There are no specified operations outlined in the Node.js Express documentation

swagger ui https://i.stack.imgur.com/UIavC.png I've been struggling to resolve this issue where the /swagger endpoint seems to only partially read the swagger.json file. Despite configuring everything correctly, no errors are appearing. It simply dis ...

javascriptnode.jsexpressswaggerdocumentation

Executing a function on a page loaded with AJAX?

I am facing a challenge in running a function when loading an ajax page. In index.html, I am loading page1.html, which contains a function that I want to execute upon page load. I have attempted various solutions without success. Let's say I simply ...

javascriptfacebookjquery

Guide on capturing an image of a specific div using JavaScript

Currently working on an interactive "HTML Quiz" that operates solely on JavaScript - it's pretty impressive! Upon completion, a results box will appear displaying time taken, percentage score, and number of correct answers out of 10. I envision addin ...

javascriptjqueryhtml