版权声明:本文为博主原创文章,未经博主允许不得转载。 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中!;)
效果:提交后输入的值会被清除!