在点击时更改输入类型颜色

change input type color wth js onclick

本文关键字:输入 类型 颜色      更新时间:2023-09-26
<script>
function valid() {
    document.getElementById("name").style.borderColor = "#ef0000";
}
</script>
<form method="post" action="">
<input type="text" name="name" id="name">
<input  type="submit" onclick="valid()" value="click">
</form>

为什么这段代码不起作用?我只看到一缕红色,边界又回到了初始状态。请原谅,伙计们,真的。我知道这是一个重复的(我什至在这里找到了至少一个有效的解决方案:http://jsfiddle.net/bcxLz4wh/)我只想知道我的代码出了什么问题以及为什么它会返回到初始状态。

它返回到初始状态,因为您正在单击提交按钮。它的默认行为是提交刷新页面的form。如果只想更改border-color则需要覆盖该默认行为。像这样:

function valid(e) {
    document.getElementById("name").style.borderColor = "#ef0000";
    e.preventDefault();
}

<form method="post" action="">
    <input type="text" name="name" id="name">
    <input type="submit" onclick="valid(event)" value="click">
</form>