使用JavaScript模仿占位符行为

Question

I am trying to re-create or immitate (HTML's) placeholder behaviour using javascript (and jQuery).

Could anyone please tell me how I would achieve this? I tried using the following code:

$(document).ready(function () {
    //On init:
    var initPlaceholderTxt = $("p").text();

    //Execution:

    //Using this, placeholder will not display correct information, 
    //lacking a previous clicked character:
    $("#test").on("keydown", function (event) {
        var value = $(this).val();
        $("p").text(value);
    });

    /*
    //Core feature:
     $("#test").keyup(function() {
          var value = $( this ).val();
      if(value != null && value != "") {
                $("p").text(value);
      }
      else {
            $("p").text(initPlaceholderTxt);
      }
    });

    //Make characters appear more dynamically or faster:
    $("#test").keydown(function() {
          var value = $( this ).val();
          $("p").text(value);
    });
    */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test"></textarea>
<p>Placeholder text</p>
<textarea placeholder="example"></textarea>

JSFiddle

I got the main part working, however I am trying to make it more dynamic. When a user types something into a default input with a placeholder defined, the moment a key has been pressed down, a character will appear in the box and the placeholder will disappear. This last part does not seem to happen with my current code.

As I press a key down, the placeholder already tries to change its text value before a new character has been added to the input.

Most would say that a solution to this would be the usage of keyup . However there is a downside of using keyup as well, as it is not making characters dynamically appear right of the bat when pressing a key. Please let me know how to solve this.

Edit: The bottom text area is an example to show the intended behaviour. The paragraph element is supposed to act/behave like (any) placeholder text which you see in the example.

Answer 1

Using attr to set dynamic value to placeholder

$("#ELEMENT").attr("placeholder","example");

Code

Answer 2

As I press a key down, the placeholder already tries to change its text value before a new character has been added to the input.

However there is a downside of using keyup as well, as it is not making characters dynamically appear right of the bat when pressing a key.

Then why not use both keyup and keydown ?

You can use more than one event in a space separated list for the first argument of .on() .

EDIT

The bottom text area is an example to show the intended behaviour.

I edited my demo with an add/remove class which makes the second <textarea> placeholder grey... Notice I given it an id ;)

 $(document).ready(function() { //On init: var initPlaceholderTxt = $("p").text(); //Execution: $("#test").on("keyup keydown", function( event ) { var value = $( this ).val(); $("p").text(value); // Just for the testing, I assume... $("#mainTextArea").text(value).removeClass("placeholder"); // Restore the placeholder if the input is empty if(value==""){ $("p").text(initPlaceholderTxt); // Just for the testing, I assume... $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder"); } }); }); 

 .placeholder{ color:grey; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="test"></textarea> <p>Placeholder text</p> <textarea placeholder="example" id="mainTextArea"></textarea> 

A simple demo without the <p> element and the placeholder attribute:

 $(document).ready(function() { //On init: var initPlaceholderTxt = "Placeholder text"; $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder"); //Execution: $("#test").on("keyup keydown", function( event ) { var value = $( this ).val(); $("#mainTextArea").text(value).removeClass("placeholder"); // Restore the placeholder if the input is empty if(value==""){ $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder"); } }); }); 

 .placeholder{ color:grey; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="test"></textarea> <br> <textarea id="mainTextArea"></textarea> 

Answer 3

Hope this will work like charm.Thank you.

  var initPlaceholderTxt = $("p").text();
  $("#test").on("keydown", function( event ) {
    var value = $( this ).val();
    $("p").text(value);
    $("#desc").text(value);
  });

Answer 4

Try this.You should check the input value length .Then apply placeholder as per your need

Add more event input keyup for more accuracy

 $(document).ready(function() { var initPlaceholderTxt = $("p"); initPlaceholderTxt.text($(initPlaceholderTxt).attr('placeholder')) $("#test").on("keydown input keyup", function(event) { var value = $(this).val(); if ($.trim(value)) { initPlaceholderTxt.text("") } else { initPlaceholderTxt.text($(initPlaceholderTxt).attr('placeholder')); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="test"></textarea> <p placeholder="example"></p> <textarea placeholder="example"></textarea> 

Answer 5

 $(document).ready(function() { //On init: var initPlaceholderTxt = $("p").text(); $('#test').val('Text here'); $('#test').css('color','grey'); //Execution: $('#test').one('keypress',function(){ $('#test').val(''); $('#test').css('color','black'); }) //Using this, placeholder will not display correct information, //lacking a previous clicked character: $("#test").on("keyup", function( event ) { var value = $( this ).val(); $("p").text(value); }); /* //Core feature: $("#test").keyup(function() { var value = $( this ).val(); if(value != null && value != "") { $("p").text(value); } else { $("p").text(initPlaceholderTxt); } }); //Make characters appear more dynamically or faster: $("#test").keydown(function() { var value = $( this ).val(); $("p").text(value); }); */ }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="test" value="text"></textarea> <p>Placeholder text</p> <textarea placeholder="example"></textarea> 

Answer 6

If you don't mind using jQuery UI you can take advantage of jQuery UI's position utility :

Here's a general idea (if you want to make it a generic plugin):

• I used the data-placeholder attribute as a selector of the element which this element is a placeholder of.
• During initialization I keep the plaholder text in the placeholder data originalText
• During initialization I keep a reference to the placeholder element in the textareas data placeholder
• Finally I make the actual placeholder of height 0 and not reacting to pointer events as to make all clicks hit the actual textarea

  //On init: $('[data-placeholder]').each(function () { var $parent = $($(this).attr('data-placeholder')); $(this).data('originalText', $(this).text()); $(this).position({ of: $parent, my: 'top left', at: 'top left' }); $parent.data('placeholder', $(this)); }); //Execution: //Using this, placeholder will not display correct information, //lacking a previous clicked character: $("#test").on("keyup", function( event ) { if ($(this).data('placeholder') && $(this).val()) { $(this).data('placeholder').text(''); } else { $(this).data('placeholder').text($(this).data('placeholder').data('originalText')); } }); 

 [data-placeholder] { z-index: 0; pointer-events: none; height: 0; overflow: visible; color: rgba(0, 0, 0, 0.5); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div> <textarea id="test"></textarea> <span data-placeholder="#test">Placeholder text</span> </div> <div> <textarea placeholder="example"></textarea> </div> 

Answer 7

I am just going to add the es6 javascript version because I really hope that will be needed in few years time as jQuery will be derelict.

In a few words that's a function that takes 2 arguments: your input element and the placeholder you want to give to it, it will take care of all the rest meaning:

• Reset to placeholder if empty on blur event
• Reset to empty value on focus
• Initialise it with your placeholder value

Surely is not optimised for performance but should get you going.

 const input = document.querySelector('input') const placeholderCustom = (input, placeholder) => { !input.value ? input.value = placeholder : '' input.addEventListener('focus', () => { input.value === placeholder ? input.value = '' : placeholder }) input.addEventListener('blur', () => { input.value === '' ? input.value = placeholder : '' }) input.addEventListener('input', () => { input.value === placeholder ? input.value = '' : '' }) } placeholderCustom(input, 'That is your placeholder') 

 <input type="text">