如何在不提交表单的情况下 使用表单输入值实时更新CSS样式预览

你这个需求无需强制使用Ajax+PHP实现，纯前端方案响应速度更快，更适合实时预览的场景，两种实现方式如下：

不需要发起后端请求，80个字段变更也能秒级更新预览效果，实现逻辑如下：

1. 首先在表单下方补充预览区域，或者准备好模态框内的预览容器
2. 配置表单字段名和CSS属性的映射关系，后续新增字段只要更新映射表即可
3. 监听表单的所有输入/选择事件，触发时同步更新预览容器的样式

完整代码示例 #

<!-- 原有表单 -->
<form id="myform">
    <label>Container Background Color : </label>
    <input type="text" name="container_bgcolor" value="" class="jscolor">
    <label>Container Color : </label>
    <input type="text" name="container_color" value="" class="jscolor">
    <label>Container Width : </label>
    <select name="container_width">
        <option value="">Select Width </option>
        <option value="480">480 Px </option>
        <option value="500">500 Px </option>
        <option value="550">550 Px </option>
    </select>
    <input type="submit" value="Submit Form">
</form>

<!-- 预览区域，可移入模态框结构 -->
<div id="previewContainer" class="container">
    Rest Info....
</div>

<script>
const form = document.getElementById('myform');
const preview = document.getElementById('previewContainer');

// 表单字段name和对应CSS属性的映射，80个字段按格式补充即可
const cssMap = {
    container_bgcolor: 'backgroundColor',
    container_color: 'color',
    container_width: 'width'
};

// 预览更新函数
function updatePreview() {
    const formData = new FormData(form);
    for (const [fieldName, fieldValue] of formData.entries()) {
        // 空值或者未配置映射的字段跳过
        if (!fieldValue || !cssMap[fieldName]) continue;
        // 特殊处理需要追加单位的属性
        if (fieldName === 'container_width') {
            preview.style[cssMap[fieldName]] = fieldValue + 'px';
        } else {
            preview.style[cssMap[fieldName]] = fieldValue;
        }
    }
}

// 绑定表单变更事件，覆盖输入、下拉选择场景
form.addEventListener('input', updatePreview);
form.addEventListener('change', updatePreview);

// 适配jscolor选色事件，确保选色时实时更新
if (window.jscolor) {
    jscolor.presets.default.onFineChange = updatePreview;
}
</script>

如果需要复用生成的CSS内容（比如后续保存到服务器），可以用该方案：

1. 首先编写动态生成CSS的PHP接口，接收表单参数输出对应CSS内容
2. 前端监听表单变更，将表单参数传给PHP接口，拉取最新的CSS内容替换到页面中

1. 编写mystyle.php接口 #

<?php
header("Content-type: text/css; charset: UTF-8");
// 接收参数并做安全过滤，默认值可自行调整
$bgcolor = !empty($_GET['container_bgcolor']) ? htmlspecialchars($_GET['container_bgcolor']) : '#fff';
$color = !empty($_GET['container_color']) ? htmlspecialchars($_GET['container_color']) : '#000';
$width = !empty($_GET['container_width']) ? (int)$_GET['container_width'] : 480;
?>
.container {
    background-color: <?php echo $bgcolor; ?>;
    color: <?php echo $color; ?>;
    padding: 10px;
    margin: auto;
    width: <?php echo $width; ?>px;
}

2. 前端交互代码 #

<!-- 头部新增动态样式标签 -->
<style id="dynamicCss"></style>

<form id="myform">
<!-- 原有表单内容不变 -->
</form>
<div class="container">
    Rest Info....
</div>

<script>
const form = document.getElementById('myform');
const dynamicCss = document.getElementById('dynamicCss');

function updatePreview() {
    const params = new URLSearchParams(new FormData(form)).toString();
    // 请求PHP接口获取最新CSS
    fetch(`mystyle.php?${params}`)
        .then(res => res.text())
        .then(css => {
            dynamicCss.textContent = css;
        });
}

form.addEventListener('input', updatePreview);
form.addEventListener('change', updatePreview);

// 同样适配jscolor的选色事件
if (window.jscolor) {
    jscolor.presets.default.onFineChange = updatePreview;
}
</script>

如果需要点击悬浮按钮在模态框展示预览，只需要将预览容器移入模态框的结构中，新增按钮控制模态框的显示/隐藏即可，上述的样式更新逻辑不需要做任何修改。

内容的提问来源于stack exchange，提问作者darshan