//如果浏览器没有为label元素添加默认行为，可手动写入foucusLables函数
function focusLables(){
var articles=document.getElementsByTagName("article");
if(articles.length==0)return false;
var forms=articles[0].getElementsByTagName("form");
if(forms.length==0)return false;
var labels=forms[0].getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
if(!labels[i].getAttribute("for"))continue;
labels[i].onclick=function(){
var id=this.getAttribute("for");
//这了不写continue，是因为onclick事件中没有循环语句，因此不能使用continue
//故直接return false;
if(!document.getElementById(id))return false;
var element=document.getElementById(id);
element.focus();
}
}
}
addLoadEvent(focusLables);
// resetFields为了兼容低版本不支持placeholder的浏览器
function resetFields(whichform){
//如果placeholder浏览器支持，则直接return，不再需要执行下面的代码
if(Modernizr.input.placeholder)return;
for(var i=0;i<whichform.elements.length;i++){
var element=whichform.elements[i];
if(element.type=="submit")continue;
var check=element.placeholder||element.getAttribute("placeholder");
if(!check)continue;
element.onfocus=function(){
var text=this.placeholder||this.getAttribute("placeholder");
if(this.value==text){
this.value="";
this.className="";
}
}
element.onblur=function(){
if(this.value==""){
this.value=this.placeholder||this.getAttribute("placeholder");
this.className="placeholder";
}
}
element.onblur();
}
}
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var thisform=document.forms[i];
resetFields(thisform);
}
}
addLoadEvent(prepareForms);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jay Skript And The Domsters: Tour dates</title>
<script src="scripts/modernizr-2010.07.16dev.js"></script>
<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
<header>
<img src="images/logo.JPG" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact the band</h1>
<form action="submit.html" method="post">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required">
</p>
<p>
<label for="message">Message:</label>
<textarea name="message" id="message" cols="45" rows="7" required="required" placeholder="Write your message here."></textarea>
</p>
<input type="submit" value="Send">
</fieldset>
</form>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
上面的代码是按照DOM编程艺术里面边学别跟着敲的。当获得焦点时，默认值应该为空，如果没有输入文本的情况下失去焦点，默认值应该会再次出现。但是我检查了好几遍，花了一下午时间也没法先哪里错了。明明是按照书上的代码敲出来的，但就是没有效果已经焦头烂额了。。求大神指点。。每次敲完代码，总要花两倍于敲代码的时间去检查错误。。有些比较明显的错误用F12就能检查出来。但有时候F12也显示没有出错，但就是效果出不来。。这该怎么检查提高效率
function focusLables(){
var articles=document.getElementsByTagName("article");
if(articles.length==0)return false;
var forms=articles[0].getElementsByTagName("form");
if(forms.length==0)return false;
var labels=forms[0].getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
if(!labels[i].getAttribute("for"))continue;
labels[i].onclick=function(){
var id=this.getAttribute("for");
//这了不写continue，是因为onclick事件中没有循环语句，因此不能使用continue
//故直接return false;
if(!document.getElementById(id))return false;
var element=document.getElementById(id);
element.focus();
}
}
}
addLoadEvent(focusLables);
// resetFields为了兼容低版本不支持placeholder的浏览器
function resetFields(whichform){
//如果placeholder浏览器支持，则直接return，不再需要执行下面的代码
if(Modernizr.input.placeholder)return;
for(var i=0;i<whichform.elements.length;i++){
var element=whichform.elements[i];
if(element.type=="submit")continue;
var check=element.placeholder||element.getAttribute("placeholder");
if(!check)continue;
element.onfocus=function(){
var text=this.placeholder||this.getAttribute("placeholder");
if(this.value==text){
this.value="";
this.className="";
}
}
element.onblur=function(){
if(this.value==""){
this.value=this.placeholder||this.getAttribute("placeholder");
this.className="placeholder";
}
}
element.onblur();
}
}
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var thisform=document.forms[i];
resetFields(thisform);
}
}
addLoadEvent(prepareForms);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jay Skript And The Domsters: Tour dates</title>
<script src="scripts/modernizr-2010.07.16dev.js"></script>
<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
<header>
<img src="images/logo.JPG" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact the band</h1>
<form action="submit.html" method="post">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required">
</p>
<p>
<label for="message">Message:</label>
<textarea name="message" id="message" cols="45" rows="7" required="required" placeholder="Write your message here."></textarea>
</p>
<input type="submit" value="Send">
</fieldset>
</form>
</article>
<script src="scripts/global.js"></script>
</body>
</html>
上面的代码是按照DOM编程艺术里面边学别跟着敲的。当获得焦点时，默认值应该为空，如果没有输入文本的情况下失去焦点，默认值应该会再次出现。但是我检查了好几遍，花了一下午时间也没法先哪里错了。明明是按照书上的代码敲出来的，但就是没有效果已经焦头烂额了。。求大神指点。。每次敲完代码，总要花两倍于敲代码的时间去检查错误。。有些比较明显的错误用F12就能检查出来。但有时候F12也显示没有出错，但就是效果出不来。。这该怎么检查提高效率
下载了。不管用。
我把<script src="scripts/modernizr-2010.07.16dev.js"></script>
if(Modernizr.input.placeholder)return; 都删掉了。也不起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jay Skript And The Domsters: Tour dates</title>
<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
<header>
<img src="images/logo.JPG" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact the band</h1>
<form action="submit.html" method="post">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required="required">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email address" required="required">
</p>
<p>
<label for="message">Message:</label>
<textarea name="message" id="message" cols="45" rows="7" required="required" placeholder="Write your message here."></textarea>
</p>
<input type="submit" value="Send">
</fieldset>
</form>
</article>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}//如果浏览器没有为label元素添加默认行为，可手动写入foucusLables函数
function focusLables(){
var articles=document.getElementsByTagName("article");
if(articles.length==0)return false;
var forms=articles[0].getElementsByTagName("form");
if(forms.length==0)return false;
var labels=forms[0].getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
if(!labels[i].getAttribute("for"))continue;
labels[i].onclick=function(){
var id=this.getAttribute("for");
//这了不写continue，是因为onclick事件中没有循环语句，因此不能使用continue
//故直接return false;
if(!document.getElementById(id))return false;
var element=document.getElementById(id);
element.focus();
}
}
}
addLoadEvent(focusLables);
// resetFields为了兼容低版本不支持placeholder的浏览器
function resetFields(whichform){
//如果placeholder浏览器支持，则直接return，不再需要执行下面的代码
//if(Modernizr.input.placeholder)return;
for(var i=0;i<whichform.elements.length;i++){
var element=whichform.elements[i];
if(element.type=="submit")continue;
var check=element.placeholder||element.getAttribute("placeholder");
if(!check)continue;
element.onfocus=function(){
var text=this.placeholder||this.getAttribute("placeholder");
if(this.value==text){
this.value="";
this.className="";
}
}
element.onblur=function(){
if(this.value==""){
this.value=this.placeholder||this.getAttribute("placeholder");
this.className="placeholder";
}
}
element.onblur();
}
}
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var thisform=document.forms[i];
resetFields(thisform);
}
}
addLoadEvent(prepareForms);
</script>
</body>
</html>
用ie测试
我想问一下如果是chrome的话，怎么实现获得焦点时，内容消失。失去焦点以后，内容又恢复。
chrome自带的placeholder并没有这个功能，只是具备一个占位的效果。function resetFields(){
var articles=document.getElementsByTagName("article");
var forms=articles[0].getElementsByTagName("form");
var inputs=forms[0].getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(!inputs[i].placeholder)continue;
var inpls=inputs[i].placeholder;
// console.log(inpls);
inputs[i].onfocus=function(){
if(this.value==this.defaultValue){
this.placeholder="";
}
}
// console.log(inputs[i].placeholder);
inputs[i].onblur=function(){
if(this.value==""){
this.placeholder=inpls;
}
}
// console.log(inputs[i].placeholder);
// inputs[i].onblur();
}
}
addLoadEvent(resetFields);
这是我自己写了一个。只是写的两个input的，还没有写textarea。但是我发现
刚加载后，页面都是正常的。
当我对id=name这个input取焦点后，内容从your name变成了your email address了。
id=email这个input还是正常的。 我也用console。log测试了一下感觉应该是对的啊。可是为什么最后第一个input的内容改变了。
还想问一下。
inputs[i].onblur();
这行代码不太明白在这里是什么作用。
注释掉感觉也没什么影响。（）的作用是立刻执行。
inputs[i].onblur是元素失去焦点以后执行。不就是在元素失去焦点以后立刻就会被执行吗？
那为什么还要inputs[i].onblur()
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jay Skript And The Domsters: Tour dates</title>
<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
<header>
<img src="images/logo.JPG" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact the band</h1>
<form action="submit.html" method="post">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholderx="Your name" required="required">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholderx="Your email address" required="required">
</p>
<p>
<label for="message">Message:</label>
<textarea name="message" id="message" cols="45" rows="7" required="required" placeholderx="Write your message here."></textarea>
</p>
<input type="submit" value="Send">
</fieldset>
</form>
</article>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
//如果浏览器没有为label元素添加默认行为，可手动写入foucusLables函数
function focusLables(){
var articles=document.getElementsByTagName("article");
if(articles.length==0)return false;
var forms=articles[0].getElementsByTagName("form");
if(forms.length==0)return false;
var labels=forms[0].getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
if(!labels[i].getAttribute("for"))continue;
labels[i].onclick=function(){
var id=this.getAttribute("for");
//这了不写continue，是因为onclick事件中没有循环语句，因此不能使用continue
//故直接return false;
if(!document.getElementById(id))return false;
var element=document.getElementById(id);
element.focus();
}
}
}
addLoadEvent(focusLables);
// resetFields为了兼容低版本不支持placeholderx的浏览器
function resetFields(whichform){
//如果placeholderx浏览器支持，则直接return，不再需要执行下面的代码
//if(Modernizr.input.placeholderx)return;
for(var i=0;i<whichform.elements.length;i++){
var element=whichform.elements[i];
if(element.type=="submit")continue;
var check=element.placeholderx||element.getAttribute("placeholderx");
if(!check)continue;
element.onfocus=function(){
var text=this.placeholderx||this.getAttribute("placeholderx");
if(this.value==text){
this.value="";
this.className="";
}
}
element.onblur=function(){
if(this.value==""){
this.value=this.placeholderx||this.getAttribute("placeholderx");
this.className="placeholderx";
}
}
element.onblur();
}
}
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var thisform=document.forms[i];
resetFields(thisform);
}
}
addLoadEvent(prepareForms);
</script>
</body>
</html>