DOM编程艺术中关于placeholder的函数

<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语句永远执行不了。求大神指点。

阅读 2.2k
2 个回答

问题1:首先document.forms[0].elements这里获取到的是form下表单元素的集合,其中有fieldset,input*3,textarea,一共5个。
问题2:函数作用是不支持placeholder属性时,onblur时将值设置为placeholder值,onfocus时将值置空,达到模拟placeholder的效果。

先默认执行失去焦点的方法,赋值class和value;所以初始有了class和value
document.forms[0].elements.length是5 包含了 fieldset 这个标签

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题