Posted in jQuery, JavaScript | Posted on 04-28-2010 | 8,623 views
This came up in an earlier conversation today, and I don't think it's something anyone would actually use, but I love how simple it is and - well, it's kinda cool too. And stupid. (Which means it was fun to write.) So what in the heck am I talking about? Imagine you give a textarea field for your client to enter text into. You trust them with HTML, but don't want to bother with a rich text area. It would be nice to give them the ability to see their code while they type. Here's a quickie jQuery solution for this.
2<script>
3$(document).ready(function() {
4 $("#codehere").keyup(function() {
5 $("#preview").html($(this).val())
6 })
7})
8</script>
9
10code here:<br/>
11<textarea id="codehere" cols="50" rows="10"></textarea>
12
13<p/>
14
15preview here:
16<div id="preview"></div>
Working from the bottom first - notice I've got my form (well, to be technical, it's just one field, not a complete form) and a div set up for my preview. My jQuery code then simply then binds to the form and on every key press, I set the HTML property of the preview div with the text value of the form. You can play with this here or if you just want to see what it looks like, here is a simple screen shot.
Edited at 2:39 PM: Thanks to multiple commenter for pointing out I should be using keyup instead.
Good game!
But as you said this was just a quick and really cool code bit.
Cool demo, thanks!
I updated both the demo and the blog post. (Ok, technically, demo is updated, blog post being updated in 30 seconds.)
Ray, another thing you can add is mouse event detection whenever the field is focused. I've used it for textarea counters and the like. This way you can pick up on paste operations. As far as the unclosed tags... pffft, get some interns to write the validation garble :P.
Is there a simple jQuery way (or whatever, who cares about frameworks now) to examine a string and see if it is valid HTML? One could simply count tags and closing tags. (And frankly, that would be enough for most of the mistakes I make when editing blog posts.) But that wouldn't handle cases where you use 'bad' html, like the <foo> tag. One could then simply regex for unrecognized tags. But that would be hard to maintain with HTML 5 coming out in the next decade or so. (Sorry, old time coder here, bit cranky it's going to take 20 years for some of the more simpler parts of HTML5.)
Anyway, has anyone ever tackled this type of validation before?
If you wanted to use it in "The Real World™" you'd probably want to look at porting HTML purifier (http://htmlpurifier.org/) to Javascript - that could be fun! :D
[code]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/...; ></script>
<script>
$(document).ready(function() {
$("#headline").keyup(function() {
$(".headline").html($(this).val())
});
$("#description").keyup(function() {
$(".description").html($(this).val())
});
$("#price").keyup(function() {
$(".price").html($(this).val())
});
});
</script>
</head>
<body>
</body>
</html>
<p>Headline:<br/>
<textarea id="headline" cols="20" rows="3"></textarea>
<br/>
<textarea id="description" cols="20" rows="3"></textarea>
<br/>
<textarea id="price" cols="20" rows="3"></textarea>
<p/>
<div id="specials">
<h1 class="headline"></h1>
<p class="description"></p>
<p class="price"></p>
</div>[/code]
[Add Comment] [Subscribe to Comments]