自动完成功能不适用于IE11和Safari浏览器

问题描述

大家晚上好。我正在实现自动完成功能作为下面的源代码。但是,当我将其应用于IE11时,它不起作用,当用户输入时它不会自动完成,而仅当我们单击输入时才起作用。我去寻找原因,但仍然找不到,希望每个人都能帮助我。非常感谢。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    body {
      font-family: 'Source Sans Pro',sans-serif;
      font-size: large;
      max-width: 500px;
      margin: 0 auto;
    }

    input[type=email] {
      font-size: large;
      width: 400px;
      -webkit-appearance: none;
      appearance: none;
    }

    input::-webkit-calendar-picker-indicator {
      display: none;
    }

    label {
      display: block;
      font-size: small;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #999;
    }
  </style>
</head>

<body>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" placeholder="your@email.com">

  <script>
    const EmailDomainSuggester = {
      domains: ["yahoo.com","gmail.com","google.com"],bindTo: $('#email'),init: function () {
        this.addElements();
        this.bindEvents();
      },addElements: function () {
        // Create empty datalist
        this.datalist = $("<datalist />",{
          id: 'email-options'
        }).insertAfter(this.bindTo);
        // Corelate to input
        this.bindTo.attr("list","email-options");
        this.bindTo.attr("autocomplete","off");
      },bindEvents: function () {
        this.bindTo.on("keyup",this.testValue);
      },testValue: function (event) {
        let el = $(this),value = el.val();
        // email has @
        // remove != -1 to open earlier
        if (value.indexOf("@") != -1) {
          value = value.split("@")[0];
          EmailDomainSuggester.addDatalist(value);
        } else {
          // empty list
          EmailDomainSuggester.datalist.empty();
        }
      },addDatalist: function (value) {
        let i,newOptionsString = "";
        for (i = 0; i < this.domains.length; i++) {
          newOptionsString += "<option value='" + value + "@" + this.domains[i] + "'>";
        }
        // add new ones
        this.datalist.html(newOptionsString);
      }
    }
    EmailDomainSuggester.init();
  </script>
</body>

</html>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...