jQuery script to modify <p> tag in HTML with user's input in textarea

Question

I want to make a simple jQuery script which will do the following:

I have HTML-code with <p> tag and <textarea> for user to type in.
User types text in <textarea> -> jQuery inserts it in <p> (class="youtyped") tag in HTML-code.

HTML-code:

<p class="youtyped"></p>

<textarea>Please type your text here</textarea>

Example of use: User typed "Hello" in textarea, HTML-code will look like:

<p class="youtyped">Hello</p>

Thanks in advance :)

Rohan Kumar · Accepted Answer · 2015-01-09 12:09:09Z

3

Try this,

$('textarea').on('keyup',function(){
    $('p.youtyped').text(this.value);
});

$('textarea').on('keyup',function(){
    $('p.youtyped').text(this.value);
});

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

<textarea>Please type your text here</textarea>

And if you want the value on Enter key then try,

$('textarea').on('keyup',function(e){
    if(e.keyCode==13)
       $('p.youtyped').text(this.value);
});

$('textarea').on('keyup',function(e){
    if(e.keyCode==13)
       $('p.youtyped').text(this.value);
});

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

<textarea>Please type your text here</textarea>

answered Jan 9, 2015 at 12:09

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj · Accepted Answer · 2015-01-09 12:09:02Z

0

Try this

$('textarea').keyup(function(){
   $('p.youtyped').html($(this).val());
});

answered Jan 9, 2015 at 12:09

Manoj

5,0913 gold badges34 silver badges59 bronze badges

1 Comment

bob-fornal Over a year ago

You might want to describe what this code is doing.

Bhushan Kawadkar · Accepted Answer · 2015-01-09 12:09:43Z

0

Try this :

$('textarea').on('keyup',function(){
    $('p.youtyped').text($(this).val());
});

answered Jan 9, 2015 at 12:09

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Collectives™ on Stack Overflow

jQuery script to modify <p> tag in HTML with user's input in textarea

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related