How to have a placeholder text for every new line of Textarea

Question

I have created a form having a "textarea" which has a "placeholder" attribute.

  <textarea placeholder="Enter Your Text"></textarea>

What I want is, I want to display this placeholder text on every line after 'Enter' key is pressed. So that I can use it for a good UI.

Ex.

         |Enter Your Text

As if I entered "Hello" and pressed Enter key, It should be like:

         Hello
         |Enter Your Text

Or As if I entered "Hello" and pressed Enter key thrice,It should be like:

         Hello


         |Enter Your Text

Can Anyone give solution for this!!

Thank You!

Why do you need this? If you need to force some text to be at the end of the textarea it would be *much* easier to add it dynamically after the user submits the form. There are so many cases you would need to deal with to get this working that it would be a nightmare to code. — Rory McCrossan, Aug 31 '16 at 12:35
The problem is about having placeholders at each and every line of textarea. — Jay, Aug 31 '16 at 12:39
Solution still stands - it would be easier to add that text to each line after the user submits the form. — Rory McCrossan, Aug 31 '16 at 12:40
@RoryMcCrossan Your solution is definitely not what OP is after. A native placeholder never sends it's text upon submit. OP's question does have some grammar issues but it's not too difficult to understand if you read through the question. — MonkeyZeus, Aug 31 '16 at 12:43
@MonkeyZeus I never said to use the native placeholder attribute. It doesn't do what the OP wants for a start. I said to *manually* add the required text to each line when the user submits the form. If you try and do it as they're typing you have to deal with them placing the caret in the middle of the text you appended, then you end up with a nonsensical mess. There is no 'nice' way of doing this as the OP wants — Rory McCrossan, Aug 31 '16 at 12:45
@RoryMcCrossan Maybe your definition of "submits the form" is different than mine but appending the placeholder text upon submittal is utterly fruitless and would cause data issues. — MonkeyZeus, Aug 31 '16 at 12:47
@A.Dubey I edited your question's title to be a little more clearer. Does it look correct? — MonkeyZeus, Aug 31 '16 at 12:48
@MonkeyZeus I'm not even sure how you come to that conclusion. Either way I wish OP the best of luck with this. — Rory McCrossan, Aug 31 '16 at 12:48
@RoryMcCrossan Please explain `it would be much easier to add it dynamically after the user submits the form.` <- What is the benefit of doing it this way? — MonkeyZeus, Aug 31 '16 at 12:50
@A.Dubey What should happen if ENTER is not pressed after typing? Should it be `Hello|Enter Your Text` on a single line? — MonkeyZeus, Aug 31 '16 at 12:55
It shows that if user wants to type on next line, he must have newline and then it will show |Enter Your Text — Jay, Aug 31 '16 at 13:09
You will have to do some research about cursor position detection in JS and implement a custom solution for this. — MonkeyZeus, Aug 31 '16 at 13:16

score 1 · Accepted Answer · answered Aug 31 '16 at 17:21

If I'm not wrong and I've understood what you want, you can do something like this (jsFiddle):

// this example needs to be improved if you want to use in production, but I think this is a way to achieve it
$('textarea').on('keypress', function(e){

    // store the placeholder
    var ph = $(this).attr('placeholder');

    // store the current value
    var current_value = $(this).val();

    // delete the placeholder from the current value (if exists)
    $(this).val(function(){ return arguments[1].replace(ph, ''); });

    // when pressing enter
    if( e.keyCode === 13 ) {

        // if there are line breaks, remove any existing placeholder and append the new one
        if( /\n/g.test(current_value) ) $(this).val(current_value.replace(ph, '') + ph);

        // otherwise just append the value with the placeholder
        else $(this).val(current_value + ph);

        // now move the cursor to the last position less the placeholder length
        var mv = $(this).val().length - ph.length;
        $(this)[0].setSelectionRange(mv, mv);

    }

});

then I don't understand what OP would like. it is not possible to have a *real* placeholder if the textarea already has some text (afaik). there are just solutions like this one or, worse, an overlap input/div or something like calculating the position but I think it's easier by this way, which can be improved from where I left it — kosmos, Aug 31 '16 at 17:56
@Kosmos -- Thank You For Your Efforts !! It is doing nice. It solves a bit. — Jay, Sep 01 '16 at 06:57

score -1 · Answer 2 · answered Aug 31 '16 at 12:37

-1

You can use \n for new line:

$('textarea').prop('placeholder','Enter\n|Your Text');

demo

If you want to repeat, then you can use ES6 repeat method:

$('textarea').prop('placeholder','Enter\n|Your Text\n'.repeat(5));

demo

answered Aug 31 '16 at 12:37

Lucy

129
4

How to have a placeholder text for every new line of Textarea

2 Answers2