在输入 javascript 时在占位符中输入单词

Question

我想做一个打字准确性检查应用程序。我想要实现的是在 placeholder 中制作单词（用户应该键入）或在用户键入时类似于 placeholder 的效果。

当用户键入 input 中的单词时，占位符中的单词应该消失或适合 input 中的单词（用户看不到）。

我检查了 Whosebug 上的其他几个示例，for example，但没有任何帮助。

这是我想要达到的效果

谁能给我一些解决这个问题的想法和解决方案？

这个问题困扰了我很久

感谢任何回复！

*对不起，我的英语很烂。 I want to something like this in this website

Answer 1

看看这个。 https://jsfiddle.net/dgstcu0y

我在这里尝试的总结如下：

我添加事件侦听器，它将接收输入并插入到我们的 div 中，就像自定义输入一样。

常量输入 = document.getElementById("输入") const 内容 = document.getElementById("内容")
```
input.addEventListener("input",(event)=>{
    const value = event.target.value
  content.innerHTML = value
})
```
然后，我把输入设为透明。但问题是它也使光标透明。因此，我尝试在我们的自定义输入 div.
之后添加 |
使用 CSS 我试图将我们的自定义 div 与通用输入重叠。

.包装器{ 位置：相对；宽度：300px； } ＃输入 { 颜色：透明；填充：0；背景：透明； } .自定义输入{ 位置：绝对；顶部：0；颜色：灰色； z-指数：-1； } #内容：之后{ 内容：“|” }

这是HTML骨架。

<html>
<body>
<div class="wrapper">
  <input id="input">
  <div class="custom-input">
    <span id="content"></span>
    <span>My Suggestions</span>
  </div>
</div>
</body>
</html>

根据需要自定义。

在输入 javascript 时在占位符中输入单词

Make words in placeholder while typing in javascript

javascript

placeholder