首页 > 解决方案 > 防止 href 使用网站地址自动完成

问题描述

我有一个表格,用户必须在其中填写他们的 facebook 和 instagram 链接。当用户没有输入他们的完整地址(例如:)https://www.facebook.com/userfacebook"并仅填写时facebook.com/userfacebook,当此数据来自数据库以在 facebook 图像图标链接上显示用户信息时,href将使用我的网站地址 + 用户填写的内容自动完成之前:

https://www.mywebsite.com/dashboard/home/facebook.com/userfacebook

如果用户使用整个 facebook 链接 ( https://www.facebook.com/userfacebook) 填写表单,则不会发生此问题。图像图标链接填充了正确的 facebook 路径。

<div class="form-group">
    <div class="form-row mt-20">
        <div class="col-md-8">
            <label for="facebook">Facebook profile</label>
            <input class="form-control" type="text" name="facebook" id="facebook" placeholder="Ex: https://wwww.facebook.com/yourname" />
            <div class="invalid-feedback">
                *Required
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="form-row mt-20">
        <div class="col-md-8">
            <label for="instagram">Instagram profile</label>
            <input class="form-control" type="text" name="instagram" id="instagram" placeholder="Ex: https://wwww.instagram.com/yourname" />
            <div class="invalid-feedback">
                *Required
            </div>
        </div>
    </div>
</div>

javascript:

axios.post("https://mywebsite.com/backend/get.php", {
        token: token,
    })
    .then((response) => {

        if (response.data != "Error getting data") {

            loading.innerHTML = "";
            response.data.forEach((res) => {
                userInfos.innerHTML +=
                    /* html */
                    `<div class="share-container">
                         <a href="${res.facebook}" target="_blank">
                             <img class="img-fluid" src="./assets/img/facebook-purple.png" alt="share-fb">
                         </a>
                         <a href="${res.instagram}" target="_blank">
                             <img class="img-fluid" src="./assets/img/instagram-purple.png" alt="share-ig">
                         </a>
                     </div>`;
            });
        }
    });

有没有办法在不更换字符串或类似的东西的情况下防止这种情况发生?

标签: javascripthtml

解决方案


Try autocomplete attribute but with random string as a value

<input class="form-control" autocomplete="randomstringhere" type="text" name="facebook" id="facebook" placeholder="Ex: https://wwww.facebook.com/yourname" />

推荐阅读