输入值变化时如何触发函数答案

【问题标题】：how to trigger a function when input value changes输入值变化时如何触发函数
【发布时间】：2020-12-28 11:42:36
【问题描述】：

我有一个程序可以让你创建box-shadow()。

这是我的代码

var inset = "";
var input1 = document.getElementById('input1').value = 0;
var input2 = document.getElementById('input2').value = 0;
var input3 = document.getElementById('input3').value = 0;
var input4 = document.getElementById('input4').value = 0;
var color = document.getElementById('color').value = 0;

function clicked() {
    inset = "inset";
}
reset();
function reset() {
    input1 = document.getElementById('input1').value;
    input2 = document.getElementById('input2').value;
    input3 = document.getElementById('input3').value;
    input4 = document.getElementById('input4').value;
    color = document.getElementById('color').value;

    document.getElementById('div').style.boxShadow = inset + " " + input1 + "px" + " " + input2 + "px" + " " + input3 + "px" + " " + input4 + "px" + " " + color;
    document.getElementById('span').innerHTML = "box-shadow" + '"' + inset + " " + input1 + "px" + " " + input2 + "px" + " " + input3 + "px" + " " + input4 + "px" + " " + color + '"';
}

div#div {
    height: 100px;
    width: 200px;
    background-color: gray;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shadow</title>
    <link rel="stylesheet" href="shadow.css">
</head>
<body>
    <div id="div"></div>
    <p></p>
    <input id="input1" type="range" onmousemove="reset()">
    <p></p>
    <input id="input2" type="range" onmousemove="reset()">
    <p></p>
    <input id="input3" type="range" onmousemove="reset()">
    <p></p>
    <input id="input4" type="range" onmousemove="reset()">
    <p></p>
    <input type="color" id="color" onmousemove="reset()"/>
    <p></p>
    <button id="inset" onclick="clicked()">inset</button>
    <p></p>
    <span id="span"></span>

    <script src="shadow.js"></script>
</body>
</html>

现在我使用onmousemove="" 来触发重置功能，有没有办法当输入值改变时触发函数。

我在谷歌上找不到。

有人知道答案吗？

【问题讨论】：

您可以使用change 和input 参见：<input type="range">
复制：How can I run a javascript function when input changes
@ChrisG 这是一个糟糕的副本，建议 onBlur 在这里不合适。而是setting oninput event with Javascript
@pilchard 最佳答案推荐onchange，只是接受的不好。我同意这不是一个完美的重复，但它是我搜索此问题标题时的第一个 Google 结果。

标签： javascript html css

【解决方案1】：

您可以使用onchange 来触发您的reset() 函数。

<input id="input1" type="range" onchange="reset()" />

此外，您可以将更新后的值传递给您的函数（例如，onchange="onChange(this.value)"），而不是像当前代码那样以编程方式获取值。

【讨论】：

oninput 在这里实际上更合适，onchange 等待失去对元素的关注，而 oninput 在值更改时立即触发。