Placeholder in <p> tag

Question

I was trying to add placeholder in <p> tag, I tried the following way but dint work out.

I need a placeholder in the <p> tag, it should be replaced with the value in input text.

JS fiddle Link

  $( "#incharge" )
  .keyup(function() {
	var value = $( this ).val();
	$( "p#incharge" ).text( value );
  })
  .keyup();

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">

<br>
<br>

<p id="incharge" placeholder="Some Placeholder text comes here"></p>

Effie

Placeholders are for inputs. You really are searching for put a simple text – Thynne

Answer 1

You can fake some kind of placeholder with :empty, :focus and pseudo-elements:

p:empty:not(:focus)::before {
  content: attr(data-placeholder);
}

<p data-placeholder="Insert text here..." contenteditable></p>

Side

Mastery over html and css what a god – Invalid

Answer 2

You can't use placeholders out of inputs. To put a text in a paragraph, simple text:

<p id="incharge">Some Placeholder text comes here</p>

So the snippet looks like this

  $( "#incharge" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p#incharge" ).text( value );
  });

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="incharge" name="incharge" title="Provide The manager in charge name">

<br>
<br>

<p id="incharge">Some Placeholder text comes here</p>

Incrustation

Answer 3

You can only use the placeholder attribute for input elements.

You can, however, (1) get the value the value of the placeholder attribute whenever the content is empty and (2) add that value to your paragraph instead of the content of the input element. If I interpret your question correctly, that is what you're trying to do.

You could achieve that effect by using the following code :

  $( "#i-incharge" )
      .keyup(function() {
          var input = $( this ),
              output = $( 'p#p-incharge' ),
              inputvalue = input.val();

          if(inputvalue === '') {
              inputvalue = input.attr( 'placeholder' );
          }
          output.text( inputvalue );
      })
      .keyup();

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" placeholder="The manager in charge name" data-toggle="tooltip" data-placement="right" id="i-incharge" name="incharge" title="Provide The manager in charge name">

<br>
<br>

<p id="p-incharge"></p>

Gharry

Care to explain what was changed? Isn't placeholder invalid attribute for p element? – Rawdan

can I implement it in input rather than P tag over there like this jsfiddle.net/sundari/yhtw20q6 – Effie

In this code, you can remove placeholder and it will run the same. Otherwise, is not that OP wants. He wants to put a placeholder, not copy the input value in the paragraph. Placeholders ARE ONLY for a form component (input, textarea) – Thynne

Actually, i thought that OP wants exactly this -> that p 'imitates' input tag.... If not, i don't actually understand question... @MarcosPérezGude -> " it should be replaced with the value in input text". So, this is actually solution.... – Suribachi

@John Slegers, just change ids of input and p tag (and selectors) - and all will be fine. ID must be unique. – Suribachi

@nevermind : the placeholder in p tag was removed about 1 minute. Before this, the p tag conserves the placeholder. It's difficult to understand that this is not possible? – Thynne

@nevermind : The user just wanted to copy whatever is shown in the input field to the paragraph. If the input has any content, the user wants to copy the content. If no content exists, he wants to copy the placeholder. Unlike Marcos's answer, my answer achieved exactly that, as illustrated by the comment of that user to my answer. – Gharry

@MarcosPérezGude : The user just wanted to copy whatever is shown in the input field to the paragraph. If the input has any content, the user wants to copy the content. If no content exists, he wants to copy the placeholder. Unlike your answer, my answer achieved exactly that, as illustrated by the comment of that user to my answer. – Gharry

@JohnSlegers your solution is working since some minutes. Your 10 firsts answer-edition still preserves the placeholder in P. Our purpose is solve the questions explaining what is the best practice or why user can't make some things. You was needed almost 20 editions to achieve it. By this way it's impossible to follow a comment thread – Thynne

@MarcosPérezGude, it is not difficult for me, however, even if 'placeholder' tag is not valid for paragraphs -> it could actually work (data-placeholder' would be 'by the book' solution, however, browsers aren't so restrictive, you can add/use some non-existing attributes, and grab their values: jsfiddle.net/sor0y588 ;) – Suribachi

@nevermind your fiddle is the same that put the text inside the paragraph, without placeholder and without javascript. What mode of complicate things, my god... I know how to use custom attributes and datasets. But I insist to OP to OP learns why P don't use placeholders – Thynne

@MarcosPérezGude : The code of my initial answer already worked perfectly. Yes, I had forgotten to remove the placeholder attribute at the bottom of the HTML code that I copied from the question (which I didn't notice), but that attribute had no impact on the functionality of my code, because the placeholder attribute is invalid for the P element. The only reason I made a few edits since my initial post, is because my answer had received two downvotes, suggesting that my answer required additional explanation and/or improvements to the code. – Gharry

@MarcosPérezGude, no, it is just illustration that COMPLETELY CUSTOM tags will work, whatever you want to do with them, and that 'placeholder' on p tag will not make any problems. John's solution worked instantly, tested it - IF OP actually wanted that (it was unclear, till his last comment to me). However - language barrier is problem here, it seems... No one understands what other tries to say... :))) – Suribachi

I copy and paste that OP said: I was trying to add placeholder in < p > tag, I tried the following way but dint work out. I need a placeholder in the < p > tag, it should be replaced with the value in input text. My answer fits with this. OP doesn't said never that he needs to put the content of the input placeholder, he said VALUE. The other things are an invention in this answer, but OP doesn't explain that. Can you explain me? – Thynne

It's really interesting to see while I discussed with all of you in this post, suddenly a question that I make some months ago and it's good explained and with a good answer, and with a bounty of 100 points given to the user that answer correctly, receive an downvote. Interesting, curious and stupid. – Thynne

@MarcosPérezGude : See the additional explanation I added to my answer. It explains what I believe the person asking the question was trying to achieve and why my answer (unlike your answer) achieves that result. – Gharry

Yes I read it. Your answer is good, I don't say the opposite. But is your interpretation and you make a solution that seems that isn't the OP answer. I don't downvote you if you think it. My answer fits perfectly to that OP asked. Your answer is more complex and complete, but OP doesn't ask it. I think that OP must to come here and explain what he needs, and in my opinion OP disappears forever hahahahaha – Thynne

@MarcosPérezGude : You also gave the answer that you thought the OP was looking for. I gave the answer that I thought the OP was looking for. It worked out, Thanks was the comment on my answer from the OP, suggesting that my interpretation was correct. – Gharry

@MarcosPérezGude : Neither of us is a native English speaker. Neither of us speaks perfect English. Each of us may experience issues either getting the right message across to someone else on this site or interpreting what someone else is trying to say. That happens on a site like this. Please just get over it! – Gharry

My english is bad, I recognize it :) You've got some reason when you said that all of us must to interpretate as op attempt to say. By my side, I close this discussion right now. Your answer is good. I only tell all of us that in first way we must to explain how and why, and you make it in several editions that I can't follow in a discussion, understand me please. Have a nice day! – Thynne