Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Updating a DIV while writing text into a textarea

Tags:

jquery

I would like to "live" update a DIV in the page with the text the user enter in a textarea. I have the following markup

<div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;">
    <div class="body"></div>
    <div class="author"></div>
    <span class="data"></span>
</div>

and wrote this jQuery code

/* Listening for keyup events on fields of the "Add Note" form: */
$("[ID$=NoteText]").live('keyup', function(e) {
    if (!this.preview)
        this.preview = $("[ID$=previewNote]");

    /* Setting the text of the preview to the contents of the 
       input field, and stripping all the HTML tags: */
    this.preview.find(".body").html($(this).val().replace(/<[^>]+>/ig, ''));

});

But the div does not get updated. What do am I missing?

thanks!

EDIT This is the form.

<form action="/Note/SaveOrDelete" id="crudForm" method="post"><input id="IssueNoteID" name="IssueNoteID" type="hidden" value="0">

<!-- The preview: -->
<div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;">
    <div class="body"></div>
    <div class="author">admin</div>
    <span class="data"></span>
</div>

<div style="margin: 16px 0px 0px 180px; width: 240px;">
    <table border="0" cellpadding="3" cellspacing="1" width="100%">
    <tbody><tr valign="top">
        <td colspan="2">
            <label for="NoteText">Testo</label>
            <br>
            <textarea cols="30" id="NoteText" name="NoteText" rows="6"></textarea>
        </td>
    </tr>
    <tr valign="top">
        <td colspan="2" align="right">
            <label for="NoteDate">Data</label>
            <input id="noteDate" name="noteDate" style="width: 120px" type="text" value="" class="hasDatepicker">
        </td>
    </tr>
    </tbody></table>
    <div style="text-align:right;">
        <input type="submit" id="btnSave" value="Salva" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
    </div>
</div>
</form>

but, listen, I have changed the jQuery code in

/* Listening for keyup events on fields of the "Add a note" form: */
$("[ID$=NoteText]").live('keyup', function(e) {
    /* Setting the text of the preview to the contents of the 
       input field, and stripping all the HTML tags: */
    $("[ID$=previewNote]").find(".body").html($(this).val().replace(/<[^>]+>/ig, ''));
});

and everything works!!! :O

It is very strange...

like image 410
Lorenzo Avatar asked Sep 15 '10 22:09

Lorenzo


People also ask

Can you put a div in a textarea?

No, it is not possible(it will not render the UI). If you want to show form fields why are you using textarea ? You can just use normal html. Save this answer.

How do I display HTML content in textarea?

Complete HTML/CSS Course 2022Use the <textarea> tag to show a text area. The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows. Specifies that on page load the text area should automatically get focus.

Does textarea have value attribute?

<textarea> does not support the value attribute.


1 Answers

Using this HTML:

<textarea id="NoteText"></textarea>

<div id="previewNote" class="note yellow" style="left:25;top:25px;z-index:1;">
    <div class="body"></div>
    <div class="author"></div>
    <span class="data"></span>
</div>​​​

and this JS:

​jQuery(function($) {
    var input = $('#NoteText'),
        preview = $('#previewNote div.body');

    input.keyup(function(e) {
        preview.text(input.val());
    });
});​

...works fine for me, and no need to strip tags either.

EDIT

This also works fine for me:

jQuery(function($) {
    $('#NoteText').live('keyup', function(e) {
        $('#previewNote div.body').text($(this).val());
    });
});​
like image 66
Kevin Avatar answered Oct 11 '22 16:10

Kevin