'As-you-type Output' in jQuery

Sun Nov 22 07:03:46 2009

As some may have already gathered, I am actually programming this blog myself. The main reason is that I think that I can learn a lot from doing so. Plus, it gives me a getaway project when other work is stressing me out and I don't want to be away from coding. As a side note, I have tried WordPress and I think it is truly amazing and thoroughly recommend it.

Anyway, today I would like to share some more code with you. While working on this blog, I found I needed something that would help me get a sense of what the finish post would look like while I typed, so I developed an editor using jQuery to do just that.

The picture below is of the post editor that I use. As you can see, it is quite simple and I am yet to develop buttons that allow me to upload images and add html tags without having to type them myself, but for now, it does what it was meant to.

Basically, below the input area is an output area which displays the the post as it will look once posted. The display area also updates on the fly as you type. I have written a small example below since I can't actually give you access to the editor for obvious reasons.

Type in the box and watch it get displayed below: (Note*30 letter limit)


I set up an input textfield with an id of "typerArea" and a p-tag with an id of "showType". If you are trying this, you will also have to download jQuery and place it in the same directory and the html file or whatever file type you are coding in. The jQuery code is as follows:

$(document).ready(function() {
   function displayType(){
      var contents = $("#typerArea").val();

As usual in jQuery, once the document is ready (line 1), the "typerArea" textfield is set up to receive a keyup event (line 2) so that after every keystroke (up state) the function displayType() (line 4) will fire. This in turn takes the contents of the typerArea textfield using jQuery's val() function and places it inside the variable 'contents' (line 5), which then gets passed as the HTML of the paragraph "showType". Quite straight forward stuff, but fun none-the-less.

If you are interested in downloaded the example file you can find that here

← back

Most recent posts

  1. Flashcards Maker - the app the helps you learn in a flash
  2. Convert Font Suitcase to TTF in 3 Easy Steps
  3. Rain or Shine - Weather Forecast Available Now!
  4. Getting around Apple's silly rules for iOS 10
  5. Localising App Names for iOS and Android

Search site:

Apps by Ubacoda.com

Click the app icons to see more info