不引人注目的JavaScript:自动清除和恢复焦点上的多个表单输入

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30109365/article/details/82182981

第1步:准备表格

首先准备您的表单,因为您希望它在没有JavaScript的情况下运行。例如,您可能有一个看起来像这样的评论表:

<form>
    <fieldset>
        <label for="author">Name</label>
        <input type="text" name="author" id="author" value="Name" />

        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="Email" />

        <label for="website">Website</label>
        <input type="text" name="url" id="url" value="Website" />

        <label for="comment">Comment</label>
        <textarea id="comment" name="comment"></textarea>

        <input id="submit" name="submit" type="submit" value="Submit" />
    </fieldset>
</form>

确保每个表单input的type值都为text。这就是我们准备表格所需要做的一切。总结第一步,任何至少具有以下属性的表单输入都可以与自动清除/恢复脚本一起使用:

    <input type="text" value="Name" />
    <input type="text" value="Email" />
    <input type="text" value="Site" />

第2步:添加JavaScript

在名为“ autoclear.js”(或其他)的文件中,添加以下JavaScript片段:

function init(){
        var inp = document.getElementsByTagName('input');
        for(var i = 0; i < inp.length; i++) {
            if(inp[i].type == 'text') {
                inp[i].setAttribute('rel',inp[i].defaultValue)
                inp[i].onfocus = function() {
                    if(this.value == this.getAttribute('rel')) {
                        this.value = '';
                    } else {
                        return false;
                    }
                }
                inp[i].onblur = function() {
                    if(this.value == '') {
                        this.value = this.getAttribute('rel');
                    } else {
                        return false;
                    }
                }
                inp[i].ondblclick = function() {
                    this.value = this.getAttribute('rel')
                }
            }
        }
    }
    if(document.childNodes) {
        window.onload = init
    }

然后从你的代码中调用它 ,例:

<script src="autoclear.js" type="text/javascript"></script>

或者,脚本可以放在包含表单head的(X)HTML文档的部分中。此外,为了提高性能,您可能希望使用在线JavaScript压缩器压缩脚本。

一切就绪后,上传并检查出来。一切都应该很好,即使在IE 6中!;)

效果:提交后输入的值会被清除!

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_30109365/article/details/82182981