oninput
属性绑定的函数可以执行计算功能。oninput
事件在用户每次修改输入字段的内容时都会触发,这使得它成为执行与输入内容相关的实时计算的理想选择。
在 oninput
事件的处理函数中,可以访问触发事件的 input
元素的 value
属性来获取用户输入的当前值,然后根据这个值执行任何需要的计算,并将结果展示在页面上或以其他方式使用。
下面是一个简单的例子,展示了如何在用户输入数字时实时计算其平方并显示在旁边的 <span>
元素中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function toLowerCaseInput(input) {
// 直接修改 input 元素的 value 属性,将其转换为小写
input.value = input.value.toLowerCase();
}
function calculateSquare(input) {
// 获取用户输入的值
var value = input.value;
// 尝试将值转换为数字
var number = Number(value);
// 如果转换成功且不是NaN,则计算平方
if (!isNaN(number)) {
// 计算平方
var square = number * number;
// 显示结果
document.getElementById('result').textContent = square.toString();
} else {
// 如果输入的不是数字,清除结果
document.getElementById('result').textContent = '';
}
}
</script>
</head>
<body>
<label for="myInput">输入大写字母:</label>
<input type="text" id="myInput" oninput="toLowerCaseInput(this)">
<label for="numberInput">输入一个数字:</label>
<input type="text" id="numberInput" oninput="calculateSquare(this)">
<span id="result"></span>
</body>
</html>