CODEWITHSUNDEEP
javascriptjqueryhtml
Barrosy
Barrosy

Reputation: 1457

Imitating placeholder behaviour using JavaScript

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.

Upvotes: 1

Views: 606

Answers (7)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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>

Upvotes: 1

Mel Macaluso
Mel Macaluso

Reputation: 3760

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">

Upvotes: 0

Sam Ram
Sam Ram

Reputation: 114

Using attr to set dynamic value to placeholder

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

Code

Upvotes: 1

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 0

apokryfos
apokryfos

Reputation: 40673

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>

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

$(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>

Upvotes: 0

Ritesh Dhoke
Ritesh Dhoke

Reputation: 169

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);
  });

Upvotes: 0

Related Questions