清除HTML中的单个表单字段

时间:2016-11-10 15:38:54

标签: javascript html

我正在创建一个简单的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>

3 个答案:

答案 0 :(得分:1)

可能会帮助你。

<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>

答案 1 :(得分:1)

据我所知,之前的答案并不涵盖问题的全部范围。原始问题请求调用函数以清除该字段。但是,我将以几种不同的方式解决这个问题。

这可以在没有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();

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

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 = "";
}

答案 2 :(得分:0)

将输入值设置为&#34; &#34; - 换句话说,没什么。 这样,当页面加载时,该值将被清除。

这样说:

<input value="">

如果您更喜欢使用JS,请将其添加到onload事件中:

window.onload = myOnloadFunc;

function myOnloadFunc() {
   document.getElementById('userId').value = ''
}