HTML 在Windows中，Chrome浏览器63版本忽略的“autocomplete=”new

admin
行业动态
2024-04-15
3564

在HTML中，autocomplete属性用于控制浏览器是否应该为自动完成功能显示建议，在Windows系统中的Chrome浏览器63版本中，autocomplete="new"属性被忽略，这意味着，即使我们在表单元素上设置了autocomplete="new"，Chrome浏览器也不会显示新的自动完成建议。

HTML 在Windows中，Chrome浏览器63版本忽略的“autocomplete=”new 第1张

为了解决这个问题，我们可以使用JavaScript来实现自定义的自动完成功能，以下是一个简单的示例，展示了如何在Windows中的Chrome浏览器63版本中实现自定义的自动完成功能：

1、我们需要创建一个HTML文件，包含一个输入框和一个按钮，当用户点击按钮时，我们将触发自定义的自动完成功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Custom Autocomplete</title>
</head>
<body>
    <input type="text" id="search" placeholder="Search...">
    <button onclick="triggerAutocomplete()">Search</button>
    <div id="suggestions"></div>
    <script src="customautocomplete.js"></script>
</body>
</html>

2、接下来，我们需要创建一个名为customautocomplete.js的JavaScript文件，在这个文件中，我们将编写自定义的自动完成功能的代码。

// 定义一个数组，用于存储搜索建议
const suggestions = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
// 定义一个函数，用于显示搜索建议
function showSuggestions(query) {
    const suggestionsDiv = document.getElementById('suggestions');
    suggestionsDiv.innerHTML = '';
    if (query.length === 0) {
        suggestionsDiv.style.display = 'none';
        return;
    }
    suggestionsDiv.style.display = 'block';
    for (const suggestion of suggestions) {
        if (suggestion.toLowerCase().startsWith(query.toLowerCase())) {
            const suggestionElement = document.createElement('div');
            suggestionElement.textContent = suggestion;
            suggestionElement.onclick = () => {
                document.getElementById('search').value = suggestion;
                suggestionsDiv.style.display = 'none';
            };
            suggestionsDiv.appendChild(suggestionElement);
        }
    }
}
// 定义一个函数，用于触发自定义的自动完成功能
function triggerAutocomplete() {
    const searchInput = document.getElementById('search');
    const query = searchInput.value;
    showSuggestions(query);
}

3、我们需要在HTML文件中引入我们刚刚创建的JavaScript文件，在上面的HTML代码中，我们已经通过<script src="customautocomplete.js"></script>实现了这一点。

现在，当我们在输入框中输入文本并点击“Search”按钮时，自定义的自动完成功能将根据输入的内容显示相应的搜索建议，请注意，这个示例仅适用于Windows中的Chrome浏览器63版本，在其他浏览器或更高版本的Chrome浏览器中，autocomplete="new"属性可能会正常工作。