如何从javascript强制输入自动完成弹出窗口

Question

我的想法是将两个输入混合用于用户输入，第二个用于自动完成弹出窗口。

.ibox {
  position:relative;
  width:200px;
  height:30px;
}
#i1 {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 100px;
  z-index:20;
}
#i0 {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 200px;
  background: gray;
  z-index:10;
}

<form autocomplete="on">
  Email: <div class="ibox">
  <input type="email" id="i0" name="email">
  <input type="email" id="i1" name="email">
  </div>
  <br>
</form>


Click on input and you should see autocomplete popup. 

一般问题：

• 如何防止白色输入上的自动完成弹出窗口，但是保持灰色？
• 如果在单击白色输入时强制灰色输入自动完成弹出窗口 还是输入了一些字符？我想隐藏灰色输入并仅用于自动完成弹出窗口。

Answer 1

您可以设置autocomplete="off"

.ibox {
  position:relative;
  width:200px;
  height:30px;
}
#i1 {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 100px;
  z-index:20;
}
#i0 {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 200px;
  background: gray;
  z-index:10;
}

<form autocomplete="on">
  Email: <div class="ibox">
  <input type="email" id="i0" name="email">
  <input type="email" id="i1" name="email"  autocomplete="off">
  </div>
  <br>
</form>


Click on input and you should see autocomplete popup.