JQuery magicpreview plug-in

http://rikrikrik.com/jquery/magicpreview/

by bdfh42 • 18 years ago

17 11 18 years ago

rikrikrik.com

jrnkntl• 18 years ago

Plugin, plugin, huge word for some code that can be accomplished by this

using the plugin: $('form.example input:text').magicpreview('mp_');

without: $('form.example input:text').change(function() { $("mp_"+this).html(this.val()); });

or something like that =)

bdfh42• 18 years ago

True, but rather less work when there are a good few form fields.

I thought it was worth posting for the idea - building up a finished view alongside data entry. Could have some utility.

axod• 18 years ago

Or without any library

formelement.onchange=function() {previewelement.nodeValue=this.value}

True there are caveats, some elements don't fire change until they loose focus... in which case formelement.onkeyup = formelement.onchange etc etc.

riklomas2• 18 years ago

Hi, I'm the author of the plug-in, I actually hang around here quite often actually but I didn't realise my plug-in had been submitted until now.

The reason I made this plug-in was because I was doing what you were doing in your without-plugin example, but the form got more complex and suddenly the original code wasn't working as well. So I decided to make the plug-in to not only help me out but I figured that other people might be having the same problem too. However, if I was doing something quick and simple, I would do something akin to your without-plugin example.

thomasmallen• 18 years ago

Awesome. I'm doing a redesign/rebuild right now and I was about to write this myself to create this effect for the Contact form (I first saw it on ALA years back in the discussion area).

adamc2• 18 years ago

This plugin is vulnerable to XSS -- try entering <script>alert('boom');</script> in the input field of the example.

riklomas2• 18 years ago

You can use the options to set the output as text() rather than html(), e.g. $('div').magicpreview('mp_', { 'change': 'text' });

But yes, I should really add a flag to strip out any script elements :)

technoguyrob• 18 years ago

XSS detection is not just as simple as that. For example, in IE, entering the following produces a pop-up:

   <table style="background-image:url(javascript:alert(1))"><tr><td>Hi</td></tr></table>

However, read debt's comment below. XSS is irrelevant here since "XSS" means cross-site scripting, i.e., ,managing to embed Javascript into pages someone ELSE sees. Only the client sees this, it doesn't get reproduced for anyone else.

debt• 18 years ago

This is only on the front end. If the backend filters html tags then XSS won't be a problem.

adamc2• 18 years ago

Filtering tags is notoriously difficult, though, because of the variety of encodings possible. Maybe you meant "properly encodes output"? That's the typical solution.

davidmathers• 18 years ago

see also chain.js: http://github.com/raid-ox/chain.js/wikis

JQuery magicpreview plug-in

Related Stories