HTML 输入，允许自动完成，但第一次点击输入时不显示下拉列表答案

【问题标题】：HTML input, allow autocomplete, but don't show the dropdown list when the input is first clickedHTML 输入，允许自动完成，但第一次点击输入时不显示下拉列表
【发布时间】：2022-01-04 02:29:08
【问题描述】：

我有一个input 类型为text 的HTML 元素。当我点击输入字段时，会弹出一个建议列表，其中包含该字段的最新输入，然后我什至在该字段中输入任何内容。

我知道我可以使用 autocomplete="off" 阻止所有自动完成功能，但我想在用户开始输入后保留自动完成功能。

最好的例子是一个简单的登录表单。

<body>
  <form>
    Username<input name="username" type="text">
    Password<input name="password" type="password">
    <button type="submit">Log In</button>
  </form>
</body>

我在此论坛或其他任何地方都找不到对此类功能的任何引用，但根据我的经验，网站上的大多数领域都是这样工作的。我的一个想法是在用户开始输入时使用 javascript 更改 autocomplete 属性，但这似乎很hacky。我想知道是否有一种不那么蛮力的方法来完成我所追求的。

【问题讨论】：

断言：“但根据我的经验，网站上的大多数领域都是这样工作的。” - 您能否提供一个演示此功能的参考实现（网站）？假设任何这样做的网站都使用自定义控件，而不是本机输入元素。
你能提供一个你正在做什么的例子吗？请html + js
对于简单的事情，这里有一个视频，介绍了如何仅使用 CSS youtu.be/2h7BQYJRbys 创建自动完成...我不知道此功能对您有多重要...如果只是为了帮助用户，视频很棒，因为由 CSS 之王“KEVIN POWELL”创建，也是这篇 w3school 文章 w3schools.com/howto/howto_js_autocomplete.asp 但如果你想要更多，你需要从 youtu.be/uFIl4BvYne0 添加一些 js（比如添加 keyup eventlisteners）
你可以收听input events。在您的侦听器函数中，您可能会执行类似const myInput = event.target; if(myInput.value.length > 0){ myInput.setAttribute("autocomplete", "on"); } 的操作。（这段代码有一些冗余，但希望你能明白。）
两点：1.您的问题标题仅靠本机输入是无法实现的。 2. 我认为您所要求的内容类似于您在 MDN 网站上找到的搜索控件：developer.mozilla.org/en-US/docs/Web/HTML/Attributes/…

标签： javascript html autocomplete

【解决方案1】：

我用的是JavaScript，代码如下

如果您需要，我还评论了所有代码:)

同样在 HTML 中最好使用<label>，因为点击标签时，会自动关注输入

现在我还添加了一些 console.log(); 如果你想测试它是否有效

// getting all the input available in the form
let myInput = document.querySelectorAll("input");
// for every input I will use the function inside
myInput.forEach(input => {
  // default, autocomplete will be disabled (because first time it will be empty)
  input.setAttribute("autocomplete", "off");
  // I will add event listener to every input, keyup is for when the key is pressed then released.

  input.addEventListener("keyup", function(event) {
    // getting what what <input> is typing now, so we can use it in the function
    const ActualInput = event.target;

    // if the length of the input is greater than 0, then we will be ON
    if (ActualInput.value.length > 0) {
      ActualInput.setAttribute("autocomplete", "on");
      console.log(ActualInput + " is ON"); // for debugging, delete later
    } // if the length of the input is 0, then we will be OFF and autocomplete will be disabled
    else {
      ActualInput.setAttribute("autocomplete", "off");
      console.log(ActualInput + " is OFF"); // for debugging, delete later
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>

</head>

<body>
  <form>
    <!-- username -->
    <label for="username">Username</label>
    <input name="username" type="text" id="username">

    <!-- password -->
    <label for="password">Password</label>
    <input name="password" type="password" id="password">

    <!-- submit -->
    <button type="submit">Log In</button>
  </form>
</body>

</html>

【讨论】：