[thelist] JAVASCRIPT: realtime update of input fields in a form

Tom Dell'Aringa pixelmech at yahoo.com
Mon Jul 1 17:45:01 CDT 2002


--- "Chris W. Parker" <cparker at swatgear.com> wrote:
> hi.
>
> i'm in the planning stages of a CMS right now, and after reading
> someones post on modifying highlighted text with javascript on the
> list
> today, gave me an idea. i know this much about javascript... var i
> = 5;
> and that's it.
>
> i'd like to know how best to handle the "previewing" of the content
> input in a multi-row textbox. or any input for that matter. the
> initial
> "good" idea i had was to in realtime display the interpreted
> contents of
> what the user was typing. the way it would work i guess would be to
> have
> a text area, and directly below that have a preview area which was
> not a
> part of the form. i know you can do this with form fields but i
> don't
> know about regular html. i.e. with currency conversion you can have
> in
> realtime the converted amount appear in a box as you type the
> original
> amount in a nother box.
>
> here is what my pseudo-code would look like... (very pseudo)
>
> <form>
> <table>
>  <tr>
>   <td><input name="content"></td>
>  </tr>
>  <tr>
>
> <td><script>javascript:document.write(input.content)</script></td>
>  </tr>
> </table>
> </form>
>
> so as the user types (and modifies their text with the highlighting
> thing i spoke about earlier) the preview version will be shown
> below the
> input box.
>
> the reason i would like to do it this way is because it would be
> cool,
> and by cool i mean totally sweet. and i also really hate clicking
> "preview" buttons on other websites so that i can wait for another
> page
> to load to show me what my input will look like. and i also think
> it
> would make it easier for the user, for the same reason i said that
> i
> don't like clicking preview buttons.
>
> what do /you/ think?
>
>
> thanks for all the help!
>
> chris.

first of all the var i = 5 cracked me up. (You DO realize that var
affects scope right? ;)...

Anyway, as far as your idea - I think you will find that unless you
have a very small entry in your CMS, that you might not like the
results of what your cool toy becomes. Besides whatever else you have
on the page, you have to have your entry form area with the
modification buttons, then you have to have a duplicate form area
below (without the mods) to have your "live" preview.

This is a lot of real estate to grab up on a page, and I think you'll
find the user scrolling up / down or left/right to see his "live
preview".

I have a CMS with HTML formatting, and to add your feature would make
my page extremely long (its for entering short one page articles).

Thats my .02 on the idea, now on to the implementation - you can do
it, it will be a pain - in fact doing it in "real" time will be a
"real" pain when it comes to bold, italics, etc. You are going to be
having to constantly check your "entry" content vs your "live
preview" content. You'll probably need to use the onChange event
handler for this.

The trick is going to parsing and matching everything up. I'm
thinking you might end up using regular expressions.

So to sum up:

1 - I have given you no real good information on the actual code
other than you have to probably use onChange

2 - I think you'll find that the idea sounds cool but implements
blah. (I could be wrong...interested to see other comments)

3 - I think real estate is an issue you won't be able to effetively
get around...

hmm../

TOm

=====
var me = tom.pixelmech.webDeveloper();
http://www.pixelmech.com/

__________________________________________________
Do You Yahoo!?
Yahoo! - Official partner of 2002 FIFA World Cup
http://fifaworldcup.yahoo.com



More information about the thelist mailing list