如何在Bubble.io中用JavaScript实时镜像文本字段内容？

1. 使用MutationObserver（实时监听，推荐） #

这是最高效的实时同步方案，能在sourceField内容或结构变化时立即触发更新，无需轮询：

修改你的outputField HTML元素代码如下：

<div class="field-container">
    <div class="nohyphen oneline" id="outputField"></div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sourceField = document.getElementById("sourceField");
        const outputField = document.getElementById("outputField");

        // 初始化同步一次
        outputField.innerHTML = sourceField.innerHTML;

        // 创建内容变化观察者
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.type === 'childList' || mutation.type === 'characterData') {
                    outputField.innerHTML = sourceField.innerHTML;
                }
            });
        });

        // 配置观察规则：监听子元素变化、文本内容变化
        const observeConfig = { 
            childList: true, 
            subtree: true, 
            characterData: true 
        };

        // 启动监听
        observer.observe(sourceField, observeConfig);
    });
</script>

2. 修复setInterval的执行问题 #

如果偏好轮询方案，报错通常是因为代码执行时sourceField还未被Bubble渲染，导致获取元素失败。调整代码确保DOM加载完成后再执行：

更新outputField的JS部分：

<div class="field-container">
    <div class="nohyphen oneline" id="outputField"></div>
</div>
<script>
    function updateText() {
        const sourceField = document.getElementById("sourceField");
        const outputField = document.getElementById("outputField");
        
        // 先检查元素是否存在，避免空指针报错
        if (sourceField && outputField) {
            outputField.innerHTML = sourceField.innerHTML;
        }
    }

    // 等待页面DOM加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        updateText(); // 立即同步一次
        setInterval(updateText, 500); // 每500ms轮询一次，可按需调整间隔
    });
</script>

3. 利用Bubble.io内置功能（无额外JS） #

作为低代码平台，Bubble本身支持直接实现同步：

• 直接将outputField的内容绑定到和sourceField相同的数据库动态数据源
• 若需格式处理，在Bubble的元素样式面板中配置；或通过工作流设置：当目标数据源更新时，同步更新outputField的内容

原setInterval报错的常见原因 #

• 元素加载顺序问题：你的JS代码在sourceField还未被Bubble渲染到页面时就执行了，导致document.getElementById返回null，调用innerHTML触发错误
• 作用域限制：Bubble对自定义HTML元素的作用域有一定隔离，直接全局执行代码可能无法正确获取到其他自定义HTML内的元素

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