定位不适用于Javascript

Question

我正在建立一个“自动填充”功能。当用户在输入字段中键入内容并且系统在数据库中找到该字符串时，它应该以灰色显示输入字段中的字符串，类似于Google过去/现在拥有/拥有的字符串。

因此我构建了两个输入字段，一个清晰可见：

HTML：

<input id="email_input" type="text">
<input id="autofill" type="text">

css：

#email_input{
    background-color: transparent;
    z-index: 100;
}

然后我通过JS确切地将autofill输入放在email_input的位置。

function positionAutocompleteInput(){
  var top = $('#email_input').position().top;
  var left = $('#email_input').position().left;
  $('#autofill').css({'top':top});
  $('#autofill').css({'left':left});
}
positionAutoFillInput();

实际的autfill我喜欢这样：

function autofill(context){
  var input = $('#email_input').val();
  var replacement = context[0].email;
  replacement = replacement.slice(input.length);
  var display = input + replacement;
  $('#autofill').val(display)
}

我尝试调用positionAutoFillInput(); onInput，以便每次输入重新定位。如果我查看控制台中两个输入字段的位置，它们都具有相同的位置。

两个输入字段都具有相同的font-size和font-family。

由于某种原因它仍然看起来：

有人知道答案吗？

Answer 1

你能用这样的CSS定位它们吗？这样就不需要JavaScript来定位它。

#autofill, #email_input {
  font-size: 20px;
}

#autofill {
  position: absolute;
  color: #CCCCCC;
}

#email_input {
  position: relative;
  z-index: 1;
  background: transparent;
}

<h1>Test</h1>
<div>
  <input id="autofill" type="text" value="1234567890">
  <input id="email_input" type="text">
</div>