Popup preview of textarea input

问题

I want to create a preview function for posts that allows people to view the output of what they enter into a textarea how it would appear once submitted. The forum uses bbcode and does not allow html in posts and the id of the textarea box is "message"

Can anyone help me create a popup that would preview this post in a popup window without passing any of its data to a database and back?

I should really have supplied more info, I realise... Basically we have a post form in the form of

<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>

with a submit button

<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">

When it's clicked, the form gets sent to another page, from where it's inserted into the database. I would like there to be a preview button like the one on livejournal, where a new popup gets created and shows what the post would look like. I looked at the source code on livejournal and it supplied jQuery, so I tried the code given here: http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx However, this did not work, as nothing showed up and also I wasn't fond of the live preview idea.

I also tried a javascript code from here: http://www.codingforums.com/showthread.php?t=174810, but once again, it didn't come up with anything...

I hope that's good info, if I should include anything else, please let me know :)

回答1:

This question is getting close to "write my code for me", but if you're just trying to get help with the best approach, here are a few:

The cleanest would be have a button that (via javascript) changes the action and target of the form and triggers a submit()... this would send all the data via post to a template page which can pick up the $_POST data and place it into a template that mimics the live template.

Alternately, you could have JavaScript/Jquery grab all the field values, and build the HTML template in javascript and then pass this into div on the page that has been styles to look (a) like a pop-up and (b) has css that mimics the live page.

There are lots of ways to do this, but those would both work. If you try something and get into a tight spot, let us know and we'll give you a hand.

回答2:

You would want to bind a keyup event to the textarea. Every time a user releases a key it would fire the function. Then your function grabs the value of the textarea and parses it for the BBCode, which I'm not familiar with. It then would take that output and place it as the contents of any element.

HTML:

<textarea id="myText"></textarea>

<div id="preview"></div>

JavaScript (jQuery):

$(document).ready(function() {

    var $textarea = $('#myText'),
        $preview = $('#preview');

    $textarea.on('keyup', function() {

        var $this = $(this),
            output = $this.val();

        // Do something with the value of the code to parse out the BBCode stuff.

        $preview.html(output);

    });

});

回答3:

Why don't you try a WYSIWYG editor like TinyCME, or CKEditor?

来源：https://stackoverflow.com/questions/9243298/popup-preview-of-textarea-input

标签

javascript

popup