A technique for making the placeholder flash when an input textfield loses focus

I am trying to implement a blinking effect on the placeholder text when the input field loses focus.

Here is the HTML code I have written:

<input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder="Please click here to Key Fob scanning work">

This is the jQuery code I have used:

$('#keyfob').on("focus blur", function(){
    $(this).attr("placeholder") == "" ? $(this).attr("placeholder", "Please click here for Key Fob scanning to work") : $(this).attr("placeholder", "");
});

You can check out the working JSFiddle code here.

Currently, I am looking for help to add a blinking effect to the placeholder text "Please click here to Key Fob scanning work". Can anyone assist me with this task?

javascriptjquerycsshtmluser-interface

Answer №1

Check out this jQuery script:

function togglePlaceholder() {

if ($('input[type=text]').attr('placeholder')) {
 // remove the placeholder text
 $('input[type=text]').attr('placeholder', '');
} 
else {
  $('input[type=text]').attr('placeholder', 'Enter Text Here...');
}
setTimeout(togglePlaceholder, 1000);
}

Here is the HTML code:

<body onload='togglePlaceholder()'>
<input type="text" on-click='togglePlaceholder()' id="formInput" class="custom-input col-md-6 text-blue" data-required='true' placeholder=" Click here to enter text">

Answer №2

Are you in search of something similar to this:

  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var clicked;
        $('#keyfob').focusout(function() {
            var s = $('#keyfob').attr("placeholder");
            clicked=true;
            blinking();    
        });
        $('#keyfob').click(function() {
            clicked=false;
            $('#keyfob').attr("placeholder", '');
        });
        function blinking() {
               if(clicked){
                     $('#keyfob').attr("placeholder", '');
                setTimeout(function() {
                    $('#keyfob').attr("placeholder", 'Please click here to Key Fob scanning work');
                    setTimeout(blinking, 500);
                }, 1000);
            }
        }
      });
   </script>

  </head>

    <body>
         <input type="text" id="keyfob" class="customform col-sm-12 text-red" data-required='true' placeholder="Please click here to Key Fob scanning work">
   </body>
 </html>

Answer №3

Check out this discussion that demonstrates how to achieve the effect using CSS alone, no need for JavaScript or jQuery.

A big thanks to @Pinal for assisting me in getting it to function properly on Firefox.

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

Steps to swap out an array string with a user-entered string

Greetings, I am a newcomer to StackOverflow and seeking assistance with a code snippet that replaces every underscore in a given string. public class MainActivity extends AppCompatActivity { private String result=""; private String textresult = "The red f ...

javascriptjavaandroidandroid-studioandroid-layout

Show the content retrieved from the JSON post request

In the javascript code below, I am trying to delete a page using $.post() and then display a message with showStatus(). Instead of hardcoding the message in showStatus(), I want to pass the text returned by the $.post() call. How can I achieve this? $.p ...

asp.netjavascriptjqueryjson

Is it possible to reduce the brightness of a background image that has already been added?

I am encountering a situation that I find difficult to put into words. I have added an image as a 'background-image' and although it is small, it suits my needs as I am still learning. However, the issue lies in the brightness of the second repea ...

htmlcss

Is there an issue with passing values to a different page through AJAX?

I am trying to pass a hidden input value from one page to another using AJAX, but for some reason, the value is not getting passed. I have limited experience with PHP, jQuery, and AJAX. Can someone offer assistance? index.php: <?php foreach($imgs a ...

phpjqueryajax

Downloading fonts from Google Fonts is always a struggle when using Next.js

After initializing a fresh Next.js project using create-next-app, I managed to successfully launch it with npm run dev. However, an issue arises every time Next.js boots up, displaying the following error: FetchError: request to https://fonts.gstatic.com/ ...

javascripttypescriptnext.jsgoogle-fonts

Is it possible to use both material-ui@next and the previous version concurrently?

I need some advice on a project I am working on that utilizes material-ui@next (v1). While I appreciate the new features in the latest autocomplete, I find it too complex for my needs. Instead, I would like to revert back to the older version of the autoco ...

javascriptmaterial-ui

Disabling a specific tab in an array of tabs using Angular and Typescript

Displayed below are 5 tabs that can be clicked by the user. My goal is to disable tabs 2 and 3, meaning that the tab names will still be visible but users will not be able to click on them. I attempted to set the tabs to active: false in the TypeScript fi ...

javascriptangulartypescriptangular-template

GLTF file: Error 404 - File could not be located

Working on loading a GLTF file and encountering a specific error: https://i.sstatic.net/EbovJ.png Curious as to why the file cannot be located and opened. Is it necessary to establish a local server for this process? After reviewing other examples online ...

javascriptthree.jsgltf

Is there a way to showcase the information contained within a JSON array on an HTML webpage?

Looking to incorporate the data from a Json array retrieved from an API into my HTML. What steps should I take to achieve this? Below is the Json array in question: { page: 2, per_page: 3, total: 12, total_pages: 4, data: [ { id: 4, ...

javascriptjqueryhtmljsonajax

How to vertically center the contents of two adjacent divs with automatic width?

I've experimented with a range of HTML elements and CSS styles in an effort to make this work, but without success. How can I achieve the following task? My goal is to have two side-by-side DIVs that automatically adjust their size based on the conte ...

csshtml

What is the best way to retrieve the value from a custom attribute in a React element?

Here is the HTML I am currently working with: <select onclick={this.handleClick}> <option key="1" value="aaa" data-plan-id="test"></option> </select> Below is the code for my handleClick event: console.log(e.target.value); ...

javascriptreactjs

What could be causing json_decode to return NULL in this scenario?

I have a custom array that I've created with the following structure: [{ "assetPreviewUrl":"pic1.jpg", "assetUrl":"pic2.jpg" }, { "assetPreviewUrl":"pic3.jpg", "assetUrl":"pic4.jpg" }] My approach involves stringifying this array and ...

javascriptphpjson

Including a logo and navigation bar in the header while collaborating with different subregions

I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions o ...

cssimageheader

What is the best way to capture any internal errors that may arise from external JavaScript code?

Within a JavaScript file, I am utilizing an API call (an npm module in Node.js) and aiming to gracefully handle any errors that may arise. However, if I input a faulty API-KEY or a non-existent city name, the internal code of the API generates an error tha ...

javascriptnode.jstry-catch

Jquery.css causing annoying flickering issue on Internet Explorer and Webkit browsers (such as Chrome and Safari), while Firefox remains unaffected

I'm encountering an issue with some code I have. It's related to a jQuery function that adjusts the position of an object as the user scrolls down the page. The code looks like this: $(document).ready(function(){ $(window).scroll(function(){ ...

jqueryfirefoxgoogle-chromewebkitparallax

Ways to swap out element within ViewContainerRef in Angular

I am currently expanding my knowledge of Angular and I have encountered a challenge regarding dynamically creating components and swapping them within a single container. Here is the setup: <ng-container #container></ng-container> Here are the ...

javascriptangulartypescript

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

htmlcss

What could be causing the issue of TinyMCE 5 not displaying formatted HTML on both the website page and in the database?

Seeking assistance as a beginner programmer. I'm currently working on my first coding project and encountered an issue. In need of a text editor, I incorporated TinyMCE 5. Utilizing JavaScript and mongoDB for coding purposes. This is how I included ...

javascriptnode.jsmongodbejs

How to place a child <div> within a parent <div> that is fixed on the page

I am currently working on creating a modal window using HTML/CSS. My goal is to have the modal window fixed in position relative to the browser window, with a white background. Inside the modal, there will be an image at the top and a div element at the bo ...

htmlcss

Calculate values dynamically when styling material-UI components

Utilizing the Material-UI style to define the class. Now, I aim to adjust the height based on the browser's width. Is there a way to dynamically calculate this within makeStyles() or implement a workaround? This snippet below represents what I am t ...

cssreactjsmaterial-ui