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

解决方案

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

这篇关于javascript - DOM编程艺术中关于placeholder的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！