Javascript 一个字符一个字符消失的占位符
Javascript 一个字符一个字符消失的占位符,javascript,html,css,Javascript,Html,Css,我的目标是有一个输入元素，在输入中键入字符时，占位符会一个字符一个字符地消失。最好使用带有占位符MM/DD/YYYY的生日输入来解释这一点。如果在输入中键入06，占位符/DD/YYYY仍应保留
尽管这个问题在以下章节中得到了回答：
，我还有一个限制：输入必须是contenteditable=true div。此处接受的答案不适用于contenteditable div
纯HTML、CSS和JavaScript的纯解决方案是最好的。请不要用jQuery。这是我的窍门：
占位符位于contented
我的目标是有一个输入元素，在输入中键入字符时，占位符会一个字符一个字符地消失。最好使用带有占位符MM/DD/YYYY的生日输入来解释这一点。如果在输入中键入06，占位符/DD/YYYY仍应保留
尽管这个问题在以下章节中得到了回答：
，我还有一个限制：输入必须是contenteditable=true div。此处接受的答案不适用于contenteditable div
纯HTML、CSS和JavaScript的纯解决方案是最好的。请不要用jQuery。这是我的窍门：
占位符位于contenteditable后面
contenteditable需要根据内容大小增长。这是通过在contenteditable上设置display:inline块来完成的。
父元素和contenteditable都应具有相同的背景色。
onclick函数被添加到父元素中，以允许在宽度为0%时关注可编辑内容
单空格字体用于确保字体中的每个字符具有相同的宽度，从而使您编写的每个字符都只隐藏一个字符
当contenteditable的宽度为0时，将添加一个伪插入符号，以指示焦点实际上位于占位符内。这是使用闪烁动画完成的，带有一般同级combinator~、空选择器和：焦点选择器
占位符也可以通过after或before伪元素实现，但是由于我们不能将伪元素放在contenteditable中，因此使用实际的dom元素作为占位符允许使用通用同级组合符来处理contenteditable空状态
例如，当宽度为0时，某些浏览器会显示原始插入符号。为了解决双插入符号问题，我们将输入插入符号隐藏在空状态
CSS变量用于同步主容器中嵌套的所有元素的颜色。我添加了两个版本：灰色背景和白色背景。此外，这是这里使用的唯一一个CSS功能，它还没有被所有现代浏览器完全支持。因此，如果您希望获得完全的浏览器支持，您可以放弃这一点，因为这对结果并不重要：-
IE&Edge仍在空状态下显示原始插入符号。
我在javascript中添加了一个函数来删除这些浏览器上的假插入符号
//获取IE或Edge浏览器版本
var isIEOrEdge=检测；
如果是红色的{
让editables=document.querySelectorAll.kb editable'；
对于let i=0；i0{
//IE 10或更早版本=>返回版本号
返回parseIntua.substringmsie+5，ua.indexOf'，msie，10；
}
var trident=ua.indexOf'trident/'；
如果三叉戟>0{
//IE 11=>返回版本号
var rv=ua.indexOf'rv:'；
返回parseIntua.substringrv+3，ua.indexOf''，rv，10；
}
var edge=ua.indexOf'edge/'；
如果边>0{
//Edge IE 12+=>返回版本号
返回parseIntua.substringedge+5，ua.indexOf''，edge，10；
}
//其他浏览器
返回false；
}
.kb可编辑{
-背景颜色：D3；
-占位符颜色：灰色；
-文字颜色：黑色；
-边框颜色：透明；
-填充物：5px；
宽度：200px；
高度：200px；
背景：var-bg颜色；
位置：相对位置；
对齐项目：开始；
字体系列：“Anonymous Pro”，monospace；
字体大小：14px；
溢出y：自动；
显示：内联块；
光标：文本；
边框：1px纯色边框颜色；
填充：var填充；
}
.kb可编辑[内容可编辑=真]{
位置：相对位置；
z指数：2；
背景：var-bg颜色；
颜色：var文本颜色；
大纲：无；
最大宽度：100%；
最大高度：100%；
显示：内联块；
/*处理长单词，将它们分成多行*/
单词包装：打断单词；
}
.kb可编辑.kb占位符{
位置：绝对位置；
顶部：var填充；
底部：var填充；
左：var填充；
右：var填充；
颜色：var占位符颜色；
}
/*用于非chrome在空状态下隐藏原始插入符号*/
[contenteditable=true]：焦点：空{
颜色：
透明的
文本阴影：0黑色；
}
.kb可编辑：非.kb-edge[内容可编辑=true]：焦点：空~.kb占位符：之前{
内容:|；
颜色：var文本颜色；
位置：绝对位置；
排名：0；
左：0；
动画：1s闪烁步结束无限；
插入符号颜色：透明；
}
@关键帧闪烁{
从…起
到{
颜色：透明；
}
50% {
颜色：黑色；
}
}
我是占位符
我是白人版！
这是我的窍门：
占位符位于contenteditable后面
contenteditable需要根据内容大小增长。这是通过在contenteditable上设置display:inline块来完成的。
父元素和contenteditable都应具有相同的背景色。
onclick函数被添加到父元素中，以允许在宽度为0%时关注可编辑内容
单空格字体用于确保字体中的每个字符具有相同的宽度，从而使您编写的每个字符都只隐藏一个字符
当contenteditable的宽度为0时，将添加一个伪插入符号，以指示焦点实际上位于占位符内。这是使用闪烁动画完成的，带有一般同级combinator~、空选择器和：焦点选择器
占位符也可以通过after或before伪元素实现，但是由于我们不能将伪元素放在contenteditable中，因此使用实际的dom元素作为占位符允许使用通用同级组合符来处理contenteditable空状态
例如，当宽度为0时，某些浏览器会显示原始插入符号。为了解决双插入符号问题，我们将输入插入符号隐藏在空状态
CSS变量用于同步主容器中嵌套的所有元素的颜色。我添加了两个版本：灰色背景和白色背景。此外，这是这里使用的唯一一个CSS功能，它还没有被所有现代浏览器完全支持。因此，如果您希望获得完全的浏览器支持，您可以放弃这一点，因为这对结果并不重要：-
IE&Edge仍在空状态下显示原始插入符号。
我在javascript中添加了一个函数来删除这些浏览器上的假插入符号
//获取IE或Edge浏览器版本
var isIEOrEdge=检测；
如果是红色的{
让editables=document.querySelectorAll.kb editable'；
对于let i=0；i0{
//IE 10或更早版本=>返回版本号
返回parseIntua.substringmsie+5，ua.indexOf'，msie，10；
}
var trident=ua.indexOf'trident/'；
如果三叉戟>0{
//IE 11=>返回版本号
var rv=ua.indexOf'rv:'；
返回parseIntua.substringrv+3，ua.indexOf''，rv，10；
}
var edge=ua.indexOf'edge/'；
如果边>0{
//Edge IE 12+=>返回版本号
返回parseIntua.substringedge+5，ua.indexOf''，edge，10；
}
//其他浏览器
返回false；
}
.kb可编辑{
-背景颜色：D3；
-占位符颜色：灰色；
-文字颜色：黑色；
-边框颜色：透明；
-填充物：5px；
宽度：200px；
高度：200px；
背景：var-bg颜色；
位置：相对位置；
对齐项目：开始；
字体系列：“Anonymous Pro”，monospace；
字体大小：14px；
溢出y：自动；
显示：内联块；
光标：文本；
边框：1px纯色边框颜色；
填充：var填充；
}
.kb可编辑[内容可编辑=真]{
位置：相对位置；
z指数：2；
背景：var-bg颜色；
颜色：var文本颜色；
大纲：无；
最大宽度：100%；
最大高度：100%；
显示：内联块；
/*处理长单词，将它们分成多行*/
单词包装：打断单词；
}
.kb可编辑.kb占位符{
位置：绝对位置；
顶部：var填充；
底部：var填充；
左：var填充；
右：var填充；
颜色：var占位符颜色；
}
/*用于非chrome在空状态下隐藏原始插入符号*/
[contenteditable=true]：焦点：空{
颜色：透明；
文本阴影：0黑色；
}
.kb可编辑：非.kb-edge[内容可编辑=true]：焦点：空~.kb占位符：之前{
内容:|；
颜色：var文本颜色；
位置：绝对位置；
排名：0；
左：0；
动画：1s闪烁步结束无限；
插入符号颜色：透明；
}
@关键帧闪烁{
从…起
到{
颜色：透明；
}
50% {
颜色：黑色；
}
}
我是占位符
我是白人版！
是的，但是需要从头开始编写和测试一些复杂的代码。为什么它必须在contenteditable中？1更简单，2如果我想切换到输入字段，我不能在链接线程中使用解决方案，因为它使用jQuery，我个人讨厌jQuery。还有其他屏蔽脚本around@charlietfl我同意解决方案需要一些技巧才能完成，但我认为这是一个有趣的案例。我希望我的回答能涵盖大部分内容。它包括一些不同寻常的CSS选择器，但除了关注elementRight之外，几乎不包含任何javascript代码，但需要从头开始编写和测试一些复杂的代码。为什么它必须在contenteditable中？1更简单，2如果我想切换到输入字段，我不能在链接线程中使用解决方案，因为它使用jQuery，我个人讨厌jQuery。还有其他屏蔽脚本around@charlietfl我同意解决方案需要一些技巧才能完成，但我认为这是一个有趣的案例。我希望我的回答能涵盖大部分内容。它包括一些不同寻常的CSS选择器，但除了关注元素外，几乎不包含任何javascript代码