CODEWITHSUNDEEP
javascriptjqueryhtml
Albert
Albert

Reputation: 507

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

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

  1. I have HTML-code with <p> tag and <textarea> for user to type in.
  2. 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 :)

Upvotes: 1

Views: 443

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

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

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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>

Upvotes: 3

Manoj
Manoj

Reputation: 5071

Try this

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

Upvotes: 0

Related Questions