<article>
<h1>Contact the band</h1>
<form method="post" action="submit.html">
<fieldset>
<p>
<label for ="name">Name:</label>
<input type="text" name="name" id="name" required="required" placeholder="Your name">
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Your email" required="required">
</p>
<p>
<label for="message">Message</label>
<textarea cols="45" rows="7" id ="message" name="message" required="required" placeholder="Write your message here"></textarea>
</p>
<input type="submit" value = "send">
</fieldset>
</form>
</article>
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.className="placeholder";
this.value = this.placeholder || this.getAttribute("placeholder");
}
}
element.onblur();
}
}
以上分别为html部分代码、js部分代码。
问题1:打开F12,发现document.forms[0].elements[4].value 返回“send”,document.forms[0].elements[0].value 返回underfined, 这里数组怎么会有5个元素?
问题2:这个resetFields函数到底是干嘛的,placeholder属性无法使用时,第一个文本框获得焦点,这时value为空啊,根本不会等于placeholder中的值,也就是说if语句永远执行不了。求大神指点。
问题1:首先document.forms[0].elements这里获取到的是form下表单元素的集合,其中有fieldset,input*3,textarea,一共5个。
问题2:函数作用是不支持placeholder属性时,onblur时将值设置为placeholder值,onfocus时将值置空,达到模拟placeholder的效果。