Geek Answers Handbook

How to make placeholder text correct and formatted correctly?

I am trying to make a simple test application for input using HTML, CSS and JS. I want to display some placeholder text in the field that the user enters, so that they know exactly what to enter when they type it. If they deteriorate, this will become obvious, because the placeholder text and input text do not match. I spent more than a few hours trying to figure this out and came up with two sub-solutions: HTML:

<div id='test' class="placeholder" data-value="This appears in the box!"> <textarea id="typed" name="typed" cols=50 rows=15></div>

CSS

  .placeholder { position: relative; } .placeholder::after { position: absolute; left: 2px; top: 2px; content: attr(data-value); pointer-events: none; opacity: 0.6; text-align: left; }

This works pretty well, but unfortunately any newlines are completely ignored, displayed as a space, or displayed literally. I tried \ u000A, \ x0A, \ r \ n, just by pressing enter, it does not work.

The second option uses the placeholder attribute:

  <textarea placeholder="line1 line2" id="typed" name="typed" cols=50 rows=15></textarea>

This displays correctly, but as soon as you start typing, it disappears.

Does anyone know how to make the standard placeholder text stay for a long time, or have some other workaround that is formatted correctly?

+6
source share
2 answers

I would stay away from using a data attribute or text placeholder to achieve this. I think it will be quite difficult for you to include line breaks and cross-browser compatibility if you go this way. How about using two absolutely spaced text boxes, stacked on top of each other? The lower the textarea will contain the text the user needs to enter and will be disabled, and the upper one will have a transparent background so that you can see the text below. Here's a quick mockup of what this might look like:

 textarea { position: absolute; font-size: 20px; } #type { color: red; } #typed { background: none; z-index: 10; } 
 <div id='test' class="placeholder"> <textarea id="typed" name="typed" cols=50 rows=15></textarea> <textarea id="type" name="typed" cols=50 rows=15 disabled> This is the text you have to type. You can put as many lines as you want. </textarea> </div>

Jsfiddle

+6
source

Here is an example .

You were pretty much there, all I did was wrap them in a container.

The text fields div and text are absolutely positioned and have the same font. The placeholder is positioned to take into account the 1px border and the 2px padding in the text box. These are the default values, if you change them, you will need to change the positioning of the positioner.

 .container { position: relative; } textarea { position: absolute; top: 0px; left: 0px; } .placeholder { position: absolute; left: 3px; top: 3px; content: attr(data-value); pointer-events: none; opacity: 0.6; text-align: left; z-index: 1; } textarea, .placeholder { font-family: arial; font-size: 16px; }

Below you will notice that there is a <br /> section separator in it for line breaks. HTML treats line breaks differently than text, so your comparison code should consider this:

 <div class='container'> <div id='test' class="placeholder">This text appears<br /> in the box</div> <textarea id="typed" name="typed" cols=50 rows=15></textarea> </div>
0
source

More articles:


All Articles