在HTML输入中显示文本

Question

是否可以在HTML输入元素中显示动态文本内容，有些类似于chrome浏览器CTRL + F的工作方式。

  

就像它显示了页面中点击次数的数量。

任何人都可以请求帮助，如果可能的话，如何或分享一些有用的材料来实现同样的目标？

Answer 1

您可以使用relative和absolute定位父元素和子元素，轻松实现此目标，如下所示：

＆＃13;

＆＃13;

.field {
  position: relative;
  display: inline-block;
}
.field__input {
  padding-right: 40px;
}
.field__helper {
  position: absolute;
  right: 5px;
  top: 4px;
  color: #999;
  font-size: 12px;
}
/* this is just fluff to make it look nicer */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

＆＃13;

<div class="field">
  <input type="text" value="find" class="field__input">
  <span class="field__helper">1 of 5</span>
</div>

＆＃13;

＆＃13;

＆＃13;

我们使用相对定位的父（.fieldRow）来包围input字段。然后，我们使用包含我们要显示的文字的span（.helper）并使用position: absolute;我们可以将其定位在input字段的右侧。最后，我们需要在input的右侧添加一点填充，以阻止输入的值流入我们的帮助文本。