/    Sign up×
Community /Pin to ProfileBookmark

Previewing User Input as they Type

Copy linkTweet thisAlerts:
Sep 06.2008

Hello,

I am trying to have the user input preview as it is being typed like in this webpage:
[url]http://microformats.org/code/hcard/creator[/url]

However, when I try it, the preview keeps getting appended after each character is inputed as seen here:
[url]http://ia311216.us.archive.org/2/items/Hlisting.01a/hlisting.html[/url]

Below is the code I used. I’m fairly new to javascript programming. Am I on the right track? Any suggestions would be appreciated. Thanks!

[CODE]
<html>

<head>

<script type=”text/javascript”>

function preview()
{

var preview = document.createElement(“div”);
preview.setAttribute(“id”, “preview”);
var name = document.createTextNode(document.getElementById(“name”).value);
preview.appendChild(name);
document.getElementById(“wrapper”).appendChild(preview);

}

</script>

</head>

<body>

<div id=”wrapper”>

<div>
<p><input id=”name” type=”text” onKeyUp=”preview();” /></p>
</div>

</div>

</body>
</html>
[/CODE]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERSep 07.2008 — I am confused as to what you want to do. ?

I don't see the connection between the two posted links.

Can you describe your problem differently?
Copy linkTweet thisAlerts:
@DokSep 07.2008 — Am I on the right track?[/QUOTE]
Yes. But instead of appending every new change in the input box to the preview you should replace the preview.

Here is a simplified example
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>WebDev Test</title>
</head>
<script type="text/javascript">

function updatePreview(e) {
document.getElementById('preview').innerHTML = this.value;
}

function main() {
document.getElementById('text').onkeyup = updatePreview;
}

</script>
</head>
<body onload="main();">
<input id="text" type="text" />
<div id="preview" style="width: 600px; height: 100px; border: 1px solid #000;">
</div>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@jorel314authorSep 07.2008 — I am confused as to what you want to do. ?

I don't see the connection between the two posted links.

Can you describe your problem differently?[/QUOTE]

Basically, as a user inputs text into the form fields, I would like a realtime preview.

So if you notice in the hcard creator webpage, as you type into the fields, your text also dynamically shows up in the preview section and code section.

In the link with my code, I was trying to test that functionality out by just doing it for one form field.
Copy linkTweet thisAlerts:
@jorel314authorSep 07.2008 — Thanks for the quick reply Dok!

Your method works well, however, I was trying to do it without using innerHTML since it is not part of the DOM specs.
Copy linkTweet thisAlerts:
@DokSep 07.2008 — [CODE]document.getElementById('preview').innerHTML = this.value;[/CODE]
is equal to
[CODE]document.getElementById('preview').firstChild.nodeValue = this.value;[/CODE]
but it is safe to rely on innerHTML - and it probably will become part of the spec.
×

Success!

Help @jorel314 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...