[html] input的数据写入和数据读取,聚焦的时候只进行写入不进行读取的写法

简单Janeee

于 2024-07-31 14:12:52 发布

阅读量378

点赞数 5

分类专栏： html基础文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/liqiannan8023/article/details/140821577

版权

html基础专栏收录该内容

15 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unified Input</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .input-section {
            margin-bottom: 20px;
        }
        .unified-input {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }
        .hidden-input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-section">
            <label for="input1">输入框:</label>
            <div class="unified-input">
                <input type="text" id="input1" placeholder="输入数据 1" oninput="handleInput1()">
                <input type="text" id="input2" class="hidden-input" readonly>
            </div>
        </div>
    </div>

    <script>
        var input1 = document.getElementById('input1');
        var input2 = document.getElementById('input2');
        var isInput1Focused = false;

        function updateInput1() {
            if (!isInput1Focused) {
                input1.value = '输入框2的值是: ' + input2.value;
            }
        }

        function handleInput1() {
            // 输入框1获取焦点时，停止更新输入框2的值
            isInput1Focused = true;
        }

        function startUpdatingInput2() {
            return setInterval(function() {
                if (!isInput1Focused) {
                    input2.value = Math.random().toFixed(2);
                    updateInput1();
                }
            }, 1000);
        }

        function handleInput1Blur() {
            isInput1Focused = false;
        }

        input1.addEventListener('focus', function() {
            isInput1Focused = true;
        });

        input1.addEventListener('blur', handleInput1Blur);

        startUpdatingInput2();
    </script>
</body>
</html>