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 :)



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.


<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.




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.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • Replace parts of string (attributes) in textarea using input boxes
    Main Target : To create a website that will have a live preview of an HTML/CSS code. More specifically : The HTML/CSS code will be editable form the user in some specific parts. So, the code in the live preview will not derive from text areas but from divs. Image of what I am trying to do : So, in my Previous Question I tried to find a way to make the live preview box work after getting the code from the black boxes. It did not work because the code was given in a div tag and not a textarea. I would like to add that the code in the div tags use xmp tags because some parts are editable from the
  • submit form after validation jquery
    I have following form: <form id="form" action="comments.php" method="post"> <ul> <li><div class="formbox_titles">Name</div><input type="text" name="name" class="required comm_input" /></li> <li><div class="formbox_titles">Email</div><input type="text" name="email" class="required comm_input"/></li> <li><div class="formbox_titles">Message</div><textarea name="message" class="required comm_text"></textarea></li> <li><input type="submit" value="Submit"></li> </ul> </form> and following JQuery for form submission: target: '#preview', success: function() { $('#formbox').slideUp('fast'); } Now the
  • 使用 javascript html 实时预览 textarea 输入(Live preview of textarea input with javascript html)
    问题 嗨,我正在设置将发布到博客的 textarea 输入的实时预览。 我目前有这个设置 <textarea name="WPcomment" id="WPComment" placeholder="Add comments:" onkeypress="document.getElementById('prevCom').innerHTML = this.value"></textarea> <div id="prevCom"></div> 问题是预览是文本区域输入后面的一个字符。 例如,如果我写“我的评论”,我会看到“我的评论” 谢谢你的帮助! 回答1 使用 keyup 和 keypress 事件,如果有人按住某个键并重复,则单独的 keyup 将不起作用。 var wpcomment = document.getElementById('WPComment'); wpcomment.onkeyup = wpcomment.onkeypress = function(){ document.getElementById('prevCom').innerHTML = this.value; }​ 演示 回答2 而不是onkeypress="..." 更改为onkeyup 。 这将解决您遇到的字符未按预期更新的问题。 所以你的最终代码应该是: <textarea name=
  • Live preview of textarea input with javascript html
    Hi I am setting up a live preview of the input of a textarea which will be posted to a blog. I currently have this set up <textarea name="WPcomment" id="WPComment" placeholder="Add comments:" onkeypress="document.getElementById('prevCom').innerHTML = this.value"></textarea> <div id="prevCom"></div> The issue is that the preview is one character behind the input of the textarea. For instance if i write "my comment" I see "my commen" Thanks for your help!
  • Why is my popup styling messed up?
    I'm using Magnific Popup to create a popup form. I copied and pasted the code from the "Popup with Form" demo here, resulting in the following test file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > <head> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/magnific/jquery.magnific-popup.js"></script> <link rel="stylesheet" type="text/css" href="../css/magnificPopup.css" /> <script
  • 如何使用 PageDown Markdown 编辑器?(How to use PageDown Markdown editor?)
    问题 我想为用户提供实时预览使用 Markdown 创建的笔记的能力。 但是我在该项目中找不到任何下载。 如何开始使用 PageDown Markdown 编辑器? 回答1 PageDown 的文档非常混乱。 我将尝试在这里创建一个更易于使用的示例。 必要的位 JS <script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js"></script> 您还可以使用.min.js版本 CSS <link rel="stylesheet" href="//cdn.rawgit.com/balpha/pagedown/master/demo/browser/demo.css" /> <style> .wmd-button > span { background-image: url('//cdn.rawgit.com/derobins
  • 为什么我的弹出样式乱七八糟?(Why is my popup styling messed up?)
    问题 我正在使用 Magnific Popup 创建一个弹出表单。 我在这里复制并粘贴了“带有表单的弹出窗口”演示中的代码,生成了以下测试文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > <head> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/magnific/jquery.magnific-popup.js"></script> <link rel="stylesheet" type="text/css" href="../css/magnificPopup.css" /> <script type="text/javascript"> $(document).ready(function() { $('.popup-with-form')
  • 如何使用jQuery生成一个简单的弹出窗口(How to generate a simple popup using jQuery)
    问题 我正在设计一个网页。 当我们单击名为mail的div的内容时,如何显示一个包含标签电子邮件和文本框的弹出窗口? 回答1 首先是CSS-调整它,但是您喜欢: a.selected { background-color:#1F75CC; color:white; z-index:100; } .messagepop { background-color:#FFFFFF; border:1px solid #999999; cursor:default; display:none; margin-top: 15px; position:absolute; text-align:left; width:394px; z-index:50; padding: 25px 25px 20px; } label { display: block; margin-bottom: 3px; padding-left: 15px; text-indent: -15px; } .messagepop p, .messagepop.div { border-bottom: 1px solid #EFEFEF; margin: 8px 0; padding-bottom: 8px; } 和JavaScript: function deselect(e) { $('.pop')
  • How to preview selected image in input type=“file” in popup using jQuery? [duplicate]
    This question already has answers here: Preview an image before it is uploaded (28 answers) Closed 4 years ago. In my code, I am allowing the user to upload an image. Now I want to show this selected image as a preview in this same popup. How can I do it using jQuery? The following is the input type I am using in my popup window. HTML code: <input type="file" name="uploadNewImage">
  • 合并两种形式的值提交(Merge values from two forms on submit)
    问题 我在一个html页面上有两种形式。 使用jQuery,提交第一个表单时,是否有可能将两种表单中的数据都放入POST数据中? 回答1 一种方法是,一旦数据验证检查成功,就将所有form2的输入复制到form1中。 这假设您没有在进行AJAX提交。 // new onsubmit function for form1 function form1_onsubmit() { if (!EntryCheck()) return false; $('#form2 :input').not(':submit').clone().hide().appendTo('#form1'); return true; } 如果您想应付两次提交(可能是由于服务器提交失败),我们需要在复制新输入之前删除所有复制的输入。 // new onsubmit function for form1 function form1_onsubmit() { $('#form1 :input[isacopy]').remove(); if (!EntryCheck()) return false; $('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1'); return true; } 回答2
  • 如何使用jQuery在弹出窗口中以输入类型=“文件”预览所选图像? [复制](How to preview selected image in input type=“file” in popup using jQuery? [duplicate])
    问题 这个问题已经在这里有了答案: 在上传图片之前预览图片(28个答案) 4年前关闭。 在我的代码中,我允许用户上传图像。 现在,我想在同一弹出窗口中显示此选定的图像作为预览。 我该如何使用jQuery? 以下是我在弹出窗口中使用的输入类型。 HTML代码: <input type="file" name="uploadNewImage"> 回答1 演示版 HTML: <form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form> jQuery的 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); 参考 回答2 如果您使用的是HTML5
  • Get value of tinymce textarea with jquery selector
    I want to get the value of a tinymce textarea <textarea id="thetextarea"></textarea> on key up in order to feed it into a show-preview script using: function showPreview(value) { $("#preview-container").load("/material-preview.php", {s:value}); } $('thetextarea').live("keyup",function (e) { var material = this.value; showPreview(material); return false; }); If I try to select the textarea id thetextarea it doesnt work (works if I dont make it an tinymce-field). with firebug I see that the text, when the textarea is tinymce-converted, is in: <body id="tinymce" class="mceContentBody"></body> but
  • FileReader和CodeMirror加载文件复杂性(FileReader and CodeMirror Load File Complication)
    问题 带有预览的默认CodeMirror HTML编辑器-http://jsfiddle.net/D9MvH/1/-http://liveweave.com/zSqCfA 使用FileReader API在CodeMirror中加载文件-http://liveweave.com/VvsXN9 这是我要执行的操作的一个非常简单的示例。 (保存功能在这些在线编辑器上不起作用,但是导入文件功能在此简单的编辑器上起作用)-http://liveweave.com/MrUBfZ 我的问题是,当我单击输入文件表单浏览文件时。 我选择了要打开的HTML文档,它将无法在CodeMirror中打开。 我已尽力尝试了所有知识,但无法正常工作。 有人能帮忙吗? HTML : <input type="file" onchange="loadfile(this)"> JavaScript : var delay; // Initialize CodeMirror editor var editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'text/html', tabMode: 'indent', lineNumbers: true, lineWrapping: true, autoCloseTags
  • Angular JS 在 textarea 中显示和编辑模型(Angular JS display and edit model in textarea)
    问题 我希望能够在<textarea>元素中编辑和显示复杂模型。 这是用于从 JSON 响应动态生成模型字段的 HTML 片段: <p>parent uuid*: </p> <input ng-model="parentUuid" capitalize type="text" placeholder="String" class="form-control" style="width:200px; display: inline-block;"/> <br/> <p>resource*:</p> <select ng-model="childResource" ng-change="loadResourceFields(childResource)" class="form-control" style="width:300px; display: inline-block;"> <option ng-repeat="childResource in restResources">{{childResource}}</option> </select> <div ng-repeat="field in childFields"> <div ng-show={{!field.isEnum}}> <p ng-show={{field.isRequired}}>{{field.name}
  • PHP & mySQL: When exactly to use htmlentities?
    PLATFORM: PHP & mySQL For my experimentation purposes, I have tried out few of the XSS injections myself on my own website. Consider this situation where I have my form textarea input. As this is a textarea, I am able to enter text and all sorts of (English) characters. Here are my observations: A). If I apply only strip_tags and mysql_real_escape_string and do not use htmlentities on my input just before inserting the data into the database, the query is breaking and I am hit with an error that shows my table structure, due to the abnormal termination. B). If I am applying strip_tags, mysql
  • WMD 编辑器回显 wmd-preview div 的值以及有关将该值存储到数据库中的查询(WMD Editor echoing value of wmd-preview div and inquiries about storing that value into a database)
    问题 我目前正在尝试将 WMD 编辑器添加到我的网站。 到目前为止,我一切正常,但现在我遇到了问题:如何将输入的信息存储到我的数据库中? 我创建了一个 JS/Ajax 函数,它将 textarea 的值分配给$wmdVal但实际上我是wmd-preview值,因为它包含 html 格式的代码。 如何获取 div wmd-preview的值并wmd-preview分配 php 变量? 或者将它存储在数据库中的最佳方法是什么? 这是我的例子 JS/AJAX 实时回显值 <script> $(document).ready(function() { var timer = null; var dataString; function submitForm(){ $.ajax({ type: "POST", url: "test1.php", data: dataString, success: function(result){ $('#wmd_result').html( $('#resultval', result).html()); } }); return false; } $('#wmd-input').on('keyup', function() { clearTimeout(timer); timer = setTimeout(submitForm, 1000); var
  • 将多个表单提交到同一页面(submit multiple forms to same page)
    问题 我在页面上有三种形式。 它们每个都有多个输入,包括文件。 我希望在提交最后一个表单时,将所有三个表单的输入都发送到操作位置的POST数据中。 如有必要,我可以使用jQuery。 回答1 这是将多种形式组合成一种形式的方法。 现在,警告:如果您使用文件类型输入的表单不止一种,那么您将遇到一个很难解决的问题。 浏览器不允许您使用XMLHttpRequest(即,Ajax,任何形式)来发布包含文件输入的多部分表单POST。 您也将无法使用其中的文件输入来创建新表单,因为您无法使用Javascript设置文件输入元素的值。 因此,唯一可行的方法是拥有多个(3个或其他形式)表格,并且其中只有一个具有文件输入。 如果是这种情况,那么您可以做的是将来自其他2个表单的所有(非文件)输入拉入另一个表单,然后提交该表单。 function whenFormsCollide() { // pass in one or more form elements var forms = $.makeArray(arguments); var hasFiles = 0, targetForm = null; $.each(forms, function(i, f) { if ($(f).find('input:file').length > 0) { ++hasFiles; targetForm = f;
  • Javascript跨窗口交互(Javascript cross window interaction)
    问题 单击链接时,我有这个非常简单的 Javascript 可以在文本区域上写入: <head> <script language="javascript" type="text/javascript"> function addtext(text) {document.form.textarea.value = document.form.textarea.value+= text;} </script> </head> <body> <form action="" method="" name="form"> <textarea name="textarea" rows="" cols="" wrap="wrap"></textarea> </form> <a href="javascript:addtext('q');">q</a> </body> 现在我想提高赌注。 我想要做的是将表单放在另一个窗口中,当我单击链接时,我会写入另一个窗口中的文本区域。 我不一定要代码,因为我意识到这可能非常复杂。 问题是从哪里开始,因为我没有任何线索!! (当我用 Javascript 谷歌跨窗口或跨域交互时,我真的没有得到任何有用的东西)。 所以我能得到的任何帮助、库、插件或任何可以引导我朝着正确方向前进的东西都非常感谢。 回答1 好的,我给你写了一个样本,你可以在 http:/
  • 如何在自定义指令中获取 ng-model 值(How to get ng-model value inside custom directive)
    问题 我在这里搜索过并尝试了我找到的答案,但我似乎无法从我的自定义指令的 ngModel 中获取模型值。 这是指令 /* *usage: <markdown ng:model="someModel.content"></markdown> */ breathingRoom.directive('markdown', function () { var nextId = 0; return { require: 'ngModel', replace: true, restrict: 'E', template: '<div class="pagedown-bootstrap-editor"></div>', link:function (scope, element, attrs, ngModel) { var editorUniqueId = nextId++; element.html($('<div>' + '<div class="wmd-panel">' + '<div id="wmd-button-bar-' + editorUniqueId + '"></div>' + '<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '">{{modelValue()}}' + '</textarea>'
  • How to get the new value of a textarea input field on paste?
    I see that when I try to read the value from a textarea field when its onpaste function is called, I get the old value of the field (the one before the paste operation), not the new value (the one after the paste operation). Here is a demonstration of this behaviour: http://jsfiddle.net/qsDnr/ A copy of the code follows: <!DOCTYPE html> <html> <head> <title>On Paste</title> <script type="text/javascript"> var textareaElement; var previewElement; function update() { previewElement.innerHTML = textareaElement.value; } window.onload = function() { textareaElement = document.getElementById(