js：判断文本框输入的内容和上次的内容是否一致，如果一致，按钮禁用；不一致则可以点击

2024-12-19 09:34:00 JS 1623

总结

要实现判断文本框输入内容与上次内容是否一致并相应禁用或启用按钮的功能，可以使用 JavaScript 的事件监听器和 DOM 操作。首先，定义一个变量来存储上次的输入内容。然后，为文本框添加 input 事件监听器，每次文本框内容发生变化时，比较当前输入内容与存储的上次内容。如果相同，则禁用按钮；如果不同，则启用按钮。以下是示例代码：

html
<!DOCTYPE html>
<html>
<head>
    <title>Text Box Comparison</title>
    <script>
        let lastValue = '';

        function handleInputChange(event) {
            const currentValue = event.target.value;
            const button = document.getElementById('myButton');

            if (currentValue === lastValue) {
                button.disabled = true;
            } else {
                button.disabled = false;
            }

            lastValue = currentValue;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const input = document.getElementById('myInput');
            input.addEventListener('input', handleInputChange);
        });
    </script>
</head>
<body>
    <input type="text" id="myInput" />
    <button id="myButton">Submit</button>
</body>
</html>

关键字

JavaScript, 文本框, 输入内容, 按钮禁用, input 事件, disabled 属性, addEventListener, DOM 操作