js中不改变表单值

在JavaScript中，如果你想在不改变表单值的情况下进行一些操作（例如验证、显示预览等），你可以采取以下几种方法：

基础概念

DOM操作：JavaScript可以通过DOM（文档对象模型）来访问和操作HTML元素。
事件监听：通过监听表单元素的事件（如input、change等），可以在不改变表单值的情况下执行特定操作。

类型

只读表单：设置表单元素为只读，防止用户修改。
事件监听：监听表单事件，但不修改表单值。
克隆表单：克隆表单元素进行操作，不影响原始表单。

应用场景

表单验证：在不改变用户输入的情况下验证表单数据。
实时预览：例如，用户在输入文本时，实时显示预览效果。
数据统计：统计用户输入的数据，但不修改输入内容。

示例代码

以下是一个简单的示例，展示如何在用户输入时进行实时预览，但不改变表单值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Preview</title>
</head>
<body>
    <form>
        <label for="textInput">输入文本:</label>
        <input type="text" id="textInput" name="textInput">
    </form>
    <div id="preview"></div>

    <script>
        document.getElementById('textInput').addEventListener('input', function(event) {
            const inputValue = event.target.value;
            document.getElementById('preview').innerText = `预览: ${inputValue}`;
        });
    </script>
</body>
</html>