javascript - 逐字符消失的占位符

Question

我的目标是拥有一个输入元素，其中的占位符会在您将字符键入输入时逐字符消失。最好使用带有占位符 MM/DD/YYYY 的“生日”输入来解释这一点。如果您在输入中键入 06，占位符 /DD/YYYY 仍应保留。

虽然这个问题的答案是: text box with placeholder text that dissapears character by character ，我还有一个限制:“输入”必须是“contenteditable="true"”div。接受的答案不适用于 contenteditable div。

纯 HTML、CSS 和 JavaScript 的纯解决方案是最好的。请不要使用 jQuery。

Answer 1

这是我的技巧:

• 占位符位于 contenteditable 后面
• contenteditable需要根据内容大小增长。这是通过设置 display: inline-block 来完成的在 contenteditable 上.
• 父元素和contenteditable应具有相同的背景颜色。
• onclick函数被添加到父元素以允许关注 editablecontent而它的宽度是0%
• monospace字体用于确保字体中的每个字符具有相同的宽度(这样一来，您编写的每个字符都恰好隐藏一个字符)
• 当 contenteditable在宽度为 0 处，添加了一个假插入符号以指示焦点(这实际上在占位符内)。这是使用 blink 完成的动画，与一般兄弟组合器(~)，:empty选择器和 :focus选择器
• 占位符也可以用 after 实现或 before伪元素，但由于我们不能将伪元素放入 contenteditable 中，使用实际的 dom 元素作为占位符允许使用通用兄弟组合器来处理 contenteditable空状态
• 有些浏览器会在宽度为 0 时显示原始插入符(例如 firefox)。为了解决双插入符，我们将输入插入符隐藏在空状态

CSS 变量 用于同步主容器内嵌套的所有元素的颜色。我添加了版本:灰色背景和白色背景。此外，这是此处使用的唯一 CSS 功能，尚未被所有现代浏览器完全支持。所以如果你想要完整的浏览器支持，你可以专门放弃它，因为它对结果不是必需的:-)

IE & Edge 仍然在空白状态下显示原始插入符号。(我在 javascript 中添加了一个函数来删除这些浏览器上的假插入符)

// Get IE or Edge browser version
var isIEOrEdge = detectIE();

if (isIEOrEdge) {
  let editables = document.querySelectorAll('.kb-editable');

  for (let i = 0; i < editables.length; i++) {
    editables[i].classList.add('kb-edge');
  }
}

// this is the only function that is actually needed if the double IE\Edge caret doesn't bother you
function getFocus(id) {
  document.getElementById(id).focus();
}



/* VERY OPTIONAL :-) */
/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}

.kb-editable {
  --bg-color: #D3D3D3;
  --placeholder-color: grey;
  --text-color: black;
  --border-color: transparent;
  --padding: 5px;
  width: 200px;
  height: 200px;
  background: var(--bg-color);
  position: relative;
  align-items: start;
  font-family: 'Anonymous Pro', monospace;
  font-size: 14px;
  overflow-y: auto;
  display: inline-block;
  cursor: text;
  border: 1px solid var(--border-color);
  padding: var(--padding);
}

.kb-editable [contenteditable="true"] {
  position: relative;
  z-index: 2;
  background: var(--bg-color);
  color: var(--text-color);
  outline: none;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  /* deal with long words (break them to multiple lines) */
  word-wrap: break-word;
}

.kb-editable .kb-placeholder {
  position: absolute;
  top: var(--padding);
  bottom: var(--padding);
  left: var(--padding);
  right: var(--padding);
  color: var(--placeholder-color);
}


/* used for non-chrome to hide original caret on empty state */
[contenteditable="true"]:focus:empty {
  color: transparent;
  text-shadow: 0 0 0 black;
}

.kb-editable:not(.kb-edge) [contenteditable="true"]:focus:empty~.kb-placeholder:before {
  content: "|";
  color: var(--text-color);
  position: absolute;
  top: 0;
  left: 0;
  animation: 1s blink step-end infinite;
  caret-color: transparent;
}

@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: black;
  }
}

<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro" rel="stylesheet">

<div class="kb-editable" onclick="getFocus('black')">
  <div contenteditable="true" id="black"></div>
  <span class="kb-placeholder">I'm a placeholder</span>
</div>

<div class="kb-editable" onclick="getFocus('white')" style="--bg-color: white; --border-color: black">
  <div contenteditable="true" id="white"></div>
  <span class="kb-placeholder">I'm the white version!</span>
</div>