javascript - 逐字符消失的占位符

Question

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

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

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

标签： javascripthtmlcss

Answer 1

这是我的窍门：

• 占位符位于contenteditable
• contenteditable根据内容大小增长的需求。这是通过设置display: inline-block在contenteditable.
• 父元素和 都contenteditable应该具有相同的背景颜色。
• onclick函数被添加到父元素以允许在editablecontent其宽度为 0% 时聚焦
• monospace字体用于确保字体中的每个字符都具有相同的宽度（使您编写的每个字符都恰好隐藏一个字符）
• 当 的contenteditable宽度为 0 时，会添加一个假插入符号来指示焦点（这实际上是在占位符内）。这是使用blink动画完成的，使用通用兄弟组合器 ( ~)、:empty选择器和:focus选择器
• 占位符也可以用 an afterorbefore伪元素来实现，但是由于我们不能在 a 中放置伪元素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>