input标签的 oninput 属性直接计算

最新推荐文章于 2024-08-30 10:14:48 发布

曾经的Songsong

最新推荐文章于 2024-08-30 10:14:48 发布

阅读量102

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/alexsong51/article/details/141476903

版权

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>