如何实现两个输入框同步输入，输入框2实时将空格替换为横杠？

嘿，问题出在PHP的运行机制上哦——PHP是服务器端语言，只有当你提交表单到服务器之后，它才会处理数据并返回结果，自然没法实现「实时同步」的效果。要完成这个实时替换的需求，咱们得用前端JavaScript来搞定，这才是处理页面实时交互的正确方式～

下面是修改后的完整代码，兼顾了前端实时交互和你原本的后端处理逻辑：

<?php 
// 保留后端处理逻辑，用于表单提交后的验证/存储（如果需要的话）
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $texto = $_POST["title"];
    // 后端也做同样的替换，避免前端被篡改后的数据不一致
    $urlcambiado = str_replace(" ", "-", strtolower($texto));
    // 这里可以添加存储到数据库或其他后端操作
}
?>

<!-- 给输入框添加ID，方便JS获取元素 -->
<input type="text" id="titleInput" name="title" class="form-control" placeholder="Ejemplo: sword-art-online">
<input type="text" id="urlCodeInput" name="url_code" class="form-control" placeholder="Ejemplo: sword-art-online">

<script>
// 获取两个输入框DOM元素
const titleInput = document.getElementById('titleInput');
const urlCodeInput = document.getElementById('urlCodeInput');

// 监听第一个输入框的input事件（输入、粘贴、删除都会触发）
titleInput.addEventListener('input', function() {
    // 处理输入内容：替换所有空白字符为横杠，同时转成小写（贴合示例效果）
    const processedText = this.value.replace(/\s+/g, '-').toLowerCase();
    // 将处理后的内容同步到第二个输入框
    urlCodeInput.value = processedText;
});
</script>

几个细节说明： #

• 用/\s+/g正则表达式替换空格，而不是直接用字符串" "：它能匹配所有空白字符（包括多个连续空格、制表符），g标记保证全局替换，不会只换第一个空格。
• 加上toLowerCase()是为了让结果和你的示例完全一致（比如输入大写字母会自动转小写），如果不需要这个效果可以直接删掉。
• 保留了原有的PHP代码：这样当用户提交表单时，后端依然可以校验和处理数据，避免前端被篡改后的数据不一致问题。

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