Django项目中JS生成的表单输入框无法正常输入问题求助

核心问题：表单被错误插入到按钮内部 #

你的代码中，fillSection函数里的const content = document.querySelector('#user-registration')选择的是HTML中的注册按钮（ID为user-registration的button元素），随后把表单直接嵌套进了按钮内部。按钮作为原生可交互元素，会干扰内部输入框的焦点行为：当输入框尝试获取焦点时，按钮的点击事件会频繁触发，导致输入框不断失去焦点，只有按住鼠标时才能短暂保留焦点完成输入。

修复步骤 #

1. 修正表单插入的目标容器 #

把表单插入到页面预留的section#content区域，而非按钮元素内：

const fillSection = (option = "user-registration") => {
    console.log("you are filling section");
    // 改为选择页面的content区域
    const content = document.querySelector('#content')
    switch (option) {
        case "user-registration":
            content.innerHTML =
            `<form id="user-registration-form" method="post">
                <div class="input-texts">
                    <div class="form-field">
                        <label for="name-user">Nombre</label>
                        <input id="name-user" type="text" name="username" placeholder="Enter your name">
                    </div>
                    <div class="form-field">
                        <label for="password-user">Password</label>
                        <!-- 密码框改为type="password"，提升安全性与体验 -->
                        <input id="password-user" type="password" name="password" placeholder="Enter your password">
                    </div>
                    <div class="form-field">
                        <label for="email-user">Email</label>
                        <!-- 邮箱框改为type="email"，自带格式验证 -->
                        <input id="email-user" type="email" name="email" placeholder="Enter your email">
                    </div>
                </div>
                <button id="submit-button" class="form-btn" type="submit">Register</button>
            </form>`;
        
            // 给表单绑定submit事件，而非按钮
            const sendDataForm = document.getElementById("user-registration-form");
            sendDataForm.addEventListener('submit', apiSendDataUser);
        break;
    }
};

2. 修复Fetch请求的参数错误 #

Fetch API提交表单数据需使用body字段而非data；同时Django需要CSRF令牌才能正常接收POST请求：

const apiSendDataUser = (event) => {
    event.preventDefault();
    
    const formData = new FormData(event.target);
    // 获取Django自动生成的CSRF令牌（需确保页面中有csrf_token）
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    fetch('http://127.0.0.1:8000/videoHub/post_user',{
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken
        },
        body: formData // 替换原错误的data字段
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));
};

若使用Django模板，需在表单内添加CSRF令牌：

<form id="user-registration-form" method="post">
    {% csrf_token %} <!-- Django模板自动生成令牌 -->
    <!-- 其余表单内容不变 -->
</form>

若是静态HTML页面，需手动添加隐藏输入框（令牌值可从页面cookie中获取）：

<input type="hidden" name="csrfmiddlewaretoken" value="你的CSRF令牌值">

3. 其他细节优化 #

• 移除不必要的z-index设置，问题根源并非层级覆盖
• 事件监听直接传递函数引用，简化代码逻辑

验证效果 #

修改完成后，点击注册按钮，表单会正确渲染到content区域，输入框可正常获取焦点并输入内容，无需按住鼠标操作。

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