javascript - 清除 HTML 中的单个表单字段

标签 javascript html

我正在创建一个简单的 HTML 登录页面,但如果我在字段中输入数据,那么当我刷新页面时,数据会保留在那里。我努力了 函数 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 具有内置函数,可以轻松清除整个表单,或通过名称访问表单元素,即使它们是表单中另一个元素的子元素。但是,请记住,只有有效的输入(包括文本区域等)字段才能通过这种方式访问​​。

因此,假设表单的 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 = "";
}

关于javascript - 清除 HTML 中的单个表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40531459/

相关文章:

java - 将图像 DataUrl 转换为图像

javascript - 滚动后更改 Bootstrap 导航栏品牌 Logo 图像的最佳方法?

html - 主页 build ——如何使用CSS更高效?

javascript - 使用 jQuery 将选定行从一个表复制到另一个表

jquery - 禁用/取消绑定(bind)点击事件元素,在不活动时重新绑定(bind)点击

javascript - 当我有键和值时,为什么会出现错误?

javascript - TouchSwipe 不触发点击事件

javascript - 获取 <div> 内第三个 <p> 元素的文本内容。具有多个同名的 div 容器

javascript - mxgraph:我想添加一个按钮来禁用/启用图表和工具栏

jquery - 使用 Dynatable 插件更新表格