在输入 javascript 时在占位符中创建单词
Posted
技术标签:
【中文标题】在输入 javascript 时在占位符中创建单词【英文标题】：Make words in placeholder while typing in javascript 【发布时间】：2022-01-15 23:00:56 【问题描述】：我想做一个打字准确性检查应用程序。我想要实现的是在用户输入时使placeholder 中的单词（用户应该输入）或类似于placeholder 的效果。
当用户在input 中键入单词时，占位符中的单词应该消失或适合input 中的单词（用户看不到它）。
我检查了 *** 上的其他几个示例，for example，但没有任何帮助。
这是我想要达到的效果
谁能给我一些关于如何解决这个问题的想法和解决方案？
我已经为此苦苦挣扎了很长时间。
感谢您的回复！
*对不起，我的英语很烂。 I want to something like this in this website
【问题讨论】：
花点时间检查您要复制的网站的来源。你会注意到他们根本没有使用<input> 标签。他们在带有display:flex; flex-wrap: wrap 的容器内为每个单词使用普通的<div> 标签。他们的光标是模拟的，它不是原生光标，他们的整个用户体验都是基于keyUp 事件监听器。
【参考方案1】：
看看这个。 https://jsfiddle.net/dgstcu0y
我在这里尝试的总结如下：
我添加了事件监听器，它将接受输入并插入到我们的 div 中，这就像自定义输入一样。
常量输入 = document.getElementById("输入") const content = document.getElementById("content")
input.addEventListener("input",(event)=>
const value = event.target.value
content.innerhtml = value
)
然后，我使输入透明。但问题是它也使光标透明。因此，我尝试在自定义输入 div 之后添加 |。
我尝试使用 CSS 将自定义 div 与通用输入重叠。
.wrapper 位置：相对； 宽度：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>
根据您的需要自定义它。
【讨论】：
感谢您的回答，Alok，但是对于您给我的链接，它正在更改my suggestions（如占位符）？
你可以改变它的风格。您可以看到“我的建议”没有改变。您可以使用 javascript 更改/插入建议的文本。我还访问了链接的网站。他们正在使用事件侦听器来完成这些样式。简而言之，他们没有使用输入来显示用户正在输入的内容。以上是关于在输入 javascript 时在占位符中创建单词的主要内容，如果未能解决你的问题，请参考以下文章