表单文本输入框默认值的自动清除和恢复

最新推荐文章于 2020-06-19 09:56:04 发布

转载最新推荐文章于 2020-06-19 09:56:04 发布 · 3.6k 阅读

文章标签：

#自动清除和恢复

javascript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript优化网页输入框用户体验的方法。通过设置默认值并在聚焦和失焦时更改输入框的内容，可以提高用户填写表单的速度和准确性。

HTML Code:

<div id="wp">
    <input type="text" name="yourname" value="用户名" />
    <input type="text" name="email" value="email" />
</div>

JS Code:

function init_input(id){
    var inp = document.getElementById(id).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 {
                    this.select();
                }
            }
            inp[i].onblur = function() {
                if(this.value == "") {
                    this.value = this.getAttribute("rel");
                }
            }
        }
    }
}
init_input("wp");

转载来源： Jeff Starr的博客