/    Sign up×
Community /Pin to ProfileBookmark

Placeholder setting in pre and post HTML5

I have the following script that could be use in pre-HTML5 and a current HTML5 program.

Is there a way to use the pre-HTML version if the current browser does not support HTML5?

How do you determine if HTML5 is the working browser so that I would know which version of the <input> tag to use?

Note: I don’t know if this is purely a JS problem or just an HTML set-up problem. ?

[code]
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta charset=”utf-8″>
<script type=”text/javascript”>

// Cross-browser compliant “PlaceHolder” function
// From: http://help.dottoro.com/ljgugboo.php

function ClearPlaceHolder (input) { if (input.value == input.defaultValue) { input.value = “”; } }
function SetPlaceHolder (input) { if (input.value == “”) { input.value = input.defaultValue; } }

</script>
</head>
<body>
<input type=”text” value=”Please fill this field” onfocus=”ClearPlaceHolder(this)” onblur=”SetPlaceHolder(this)” />

<input type=”text” value=”” placeholder=”Zipcode” />
</body>

</body>
</html>
[/code]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@007JulienAug 05.2013 — There is no need of placeholder to build accessible forms.

Here is an old example.
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Formulaire</title>
<style type="text/css">
body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600;}
#frm {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96;border:1px solid #000;}
h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
input {padding:3px;font:16px Georgia,Garamond,Serif;background:#ffc;border:1px solid #000;}
#page a {text-decoration:none;color:#600}
#page a:hover {text-decoration:underline;font-weight:bold;}
</style>
<script type="text/javascript">
var t_f=null;
function fcs(t){
if (t.value==t.defaultValue) {t.value='';if (document.selection && document.selection.clear) document.selection.clear()}
}
function blr(t){
if (t.value=='') {t.value=t.defaultValue;}
}
</script>
</head>
<body>
<form id="frm" method="POST" action="#">
<h1>For new forms</h1>
<p><input id="pre" name="pre" type="text" value="Your vorname" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nom" name="nom" type="text" value="Your name" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="crl" name="crl" type="text" value="Your adress" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nrg" name="nrg" type="submit" title="Submit the form" value="Register"></p>
<p><input type="reset" title="Reset the form" value="Reset"></p>
</form>
</body>
</html>
[/CODE]

It's more difficult with password. Some browser don't accept to modify the type (passeword) of input... the solution consists to build a new input.

I discover recently on this page an other cunning solution with labels with a demo there
Copy linkTweet thisAlerts:
@JMRKERauthorAug 05.2013 — Thanks for the reply.

Further clarification please:

So are you saying to wait until HTML5 is more popular to use the 'placeholder=xxx' attribute?

Or don't bother to use it at all, now or in the future?
Copy linkTweet thisAlerts:
@007JulienAug 05.2013 — I think a lot of gadgets are presented as innovations (to sell new products), while we can do many things with JavaScript and HTML4 (XHTML are now old-fashioned when it was, a few years ago, presented as the only future). We lose a lot of flexibility with some new gadgets... I am saying to wait time remove all useless gadgets.

(*) For example labels are usful for robots. Then they needs captcha...
×

Success!

Help @JMRKER 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 4.29,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...