清除HTML中的单个表单字段

Clear a single form field in HTML

本文关键字：表单 字段 单个 HTML 清除      更新时间：2023-09-26

我正在创建一个简单的HTML登录页面，但是如果我在字段中输入数据，刷新页面时它会留在那里。我试过了 function pageInit(ID) { this.browserbot.getCurrentWindow().document.getElementById(ID).value = ''; }但是这没有做任何事情(我把它放在登录输入的onLoad中)

HTML: 

    <title>Login</title>
</head>
<body>
    <form>
        <fieldset>
            <legend><h3>Please Login:</h3></legend>
            <input type="text" placeholder="Username" name="userId" id="userId" onLoad="pageInit('userId');"><br>
            <input type="password" placeholder="Password" name="passwd" id="passwd" onLoad="pageInit('passwd');"><br>
        </fieldset>
    </form>
</body>

CSS: 

<style>
html {
    font-family: sans-serif;
    text-align: center;
}
a {
    font-weight: normal;
}
a:hover {
    font-weight: bold;
}
#userId, #passwd {
    width: 30%;
    height: 40px;
    text-align: center;
}
</style>

JS: 

<script>
function pageInit(ID) {
    this.browserbot.getCurrentWindow().document.getElementById(ID).value = '';
}
</script>

据我所知，前面的答案没有涵盖问题的全部范围。原始问题要求调用一个函数来清除字段。然而，我将用几种不同的方式来解决这个问题。

这完全不需要JavaScript就可以实现，只需要像下面这样简单地设置value属性:

<input type="text" placeholder="Username" name="userId" id="userId" value="" />
<input type="password" placeholder="Password" name="passwd" id="passwd" value="" />
上面的

将确保在加载页面时字段是清晰的，但只使用HTML。要通过JavaScript做到这一点，必须考虑许多事情。首先，应该定义一个函数，该函数需要在加载页面时调用。

function clearValue(id) {
    document.getElementById(id).value = "";
}

这将简单地将值设置为空白。然而，这让我们回到了最初的问题。为每个元素设置onload不起作用，我们必须使用window.onload。

window.onload = function() {
    clearValue("userID");
    clearValue("passwd");
}

这将逐个清除每个值。然而，有一种更好的方法可以做到这一点。JavaScript有内置函数，可以很容易地清除整个表单，或者通过名称访问表单的元素，即使它们是表单中另一个元素的子元素。但是，请记住，只有有效的输入(包括textarea等…)字段才能以这种方式访问。

所以，假设表单的ID是myform，这将清除整个表单，无论有多少字段:

document.getElementById("myform").reset();

就是这么简单。使用form元素，您还可以按名称访问字段，如上所述。

var f = document.getElementById("myform").elements;
f["userId"].value = "";
f["passwd"].value = "";

使用上面的代码使它更快，特别是如果你有更多的字段。

把JS放在一起，它看起来像这样: 
window.onload = function() {
    // using function
    clearValue("userID");
    clearValue("passwd");
    // or, reset entire form
    document.getElementById("myform").reset();
    // or, clear each field one-by-one
    var f = document.getElementById("myform").elements;
    f["userId"].value = "";
    f["passwd"].value = "";
}

也许会对你有帮助。

<input type="text" value="initial" id="field">
<button id="reset">reset</button>
<script type="text/javascript">
    document.getElementById('reset').onclick= function() {
        var field= document.getElementById('field');
        field.value= field.defaultValue;
    };
</script>

设置输入值为" " -换句话说，没有。这样，当页面加载时，该值将被清除。

这样实现:

<input value="">

如果你更愿意使用JS，把这个添加到你的onload事件中:

window.onload = myOnloadFunc;
function myOnloadFunc() {
   document.getElementById('userId').value = ''
}
相关文章：