How to auto-hide placeholder text in input field using jquery

Question

i have this code here and what it does it hides placeholder fields on focus and show them on blur using jquery but I need someone to explain this code line by line to me as I'm beginner

 $(function() { 'use strict'; // hide placeholder on form focus $('[placeholder]').focus(function() { $(this).attr('data-text', $(this).attr('placeholder')); $(this).attr('placeholder', ''); }).blur(function() { $(this).attr('placeholder', $(this).attr('data-text')); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <h4 class="text-center"> Admin Login </h4> <input type="text" name="user" placeholder="Username" autocomplete="off"> <input type="password" name="pass" placeholder="Password" autocomplete="new-password"> <input type="submit" value="Login"> </form>

Answer 1

$(function() {}).... 
    is an anonymous function which gets called when js file gets loaded in the browser.

$('[placeholder]')
    Provides collections of elements objects having placeholder inside the form.

$('[placeholder]').focus(callback)
    This statement will bind the focus event to all the elements which supports placeholder.

callback()
    This is a function which gets called when above event gets fired.

Inside call back in above code two below statements are written
    $(this).attr('data-text', $(this).attr('placeholder'));
    // Above satement will pick text given in placeholder property and assign this to 'data-text' property

    $(this).attr('placeholder', '');
        //Above stement will make placeholder text empty by assigning emty string.

.blur(callback_b)
    This statement will bind the blur event to all the elements which supports placeholder.

callback_b()
    This is a function which gets called when blur event gets fired.

Inside callback_b() below code is written
    $(this).attr('placeholder', $(this).attr('data-text'));
    //This statement will take the value assigned to 'data-text' in focus event and assign it back to placeholder property.

Hope this Helps, Please mark it as an answer if its as per your need.

Answer 2

so basically what it is doing is when you focus the element, it stores the placeholder attribute's value in the data-text attribute and sets the placeholder to empty. then on blur it just sets the placeholder to the value in the attribute. it is stored in the data-text attribute so it can be retrieved later. it has no special use besides functioning like a variable here to store a value.

if you are wondering what $('[placeholder]').focus(function() { does, basically it means that if you focus any object that has the placeholder attribute, call the function.

Answer 3

$('[placeholder]')

Any object jQuery finds with the attribute placeholder

.focus(...)

Do the inner code when the element is focused

$(this).attr('data-text',$(this).attr('placeholder'));

This line stores the placeholder temporarily (so you can re-set it later)

$(this).attr('placeholder','');

This clears the placeholder from your element

.blur(...)

Do the inner code when the element is blurred

$(this).attr('placeholder',$(this).attr('data-text'));

This line sets the placeholder to the value stored in the temporary location (as mentioned above)

Answer 4

$(function () {
  'use strict';
  //hide Placeholder on From Focus

  $('[placeholder]')
    .focus(function () {
      $(this).attr('data-text', $(this).attr('placeholder'));
      $(this).attr('placeholder', '');
    })
    .blur(function () {
      $(this).attr('placeholder', $(this).attr('data-text'));
});