Question

我的目标是拥有一个输入元素，当您在输入中键入字符时，占位符会逐字逐渐消失。最好使用＆＃34;生日＆＃34;输入，占位符MM/DD/YYYY。如果您在输入中键入06，则占位符/DD/YYYY仍应保留。

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

一个纯粹的解决方案，纯HTML，CSS和JavaScript是最好的。请不要jQuery。

Answer 1

这是我的诀窍：

占位符位于contenteditable
contenteditable需要根据内容大小增长。这是通过在display: inline-block上设置contenteditable来完成的。
父元素和contenteditable都应具有相同的背景颜色。
onclick函数已添加到父元素，以便在editablecontent宽度为0％时关注{/ 1}
monospace字体用于确保字体中的每个字符都具有相同的宽度（使得您编写的每个字符都只隐藏一个字符）
当contenteditable的宽度为0时，会添加一个假插入符号以指示焦点（这实际上位于占位符内）。这是使用blink动画，一般同级组合子（~），:empty选择器和:focus选择器
占位符也可以通过after或before伪元素实现，但由于我们无法在contenteditable内放置伪元素，因此使用实际值占位符的dom元素允许使用通用兄弟组合器来处理contenteditable空状态
当宽度为0（例如firefox）时，某些浏览器会显示原始插入符号。为了解决双重插入符号，我们将输入插入符隐藏在空状态

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

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

＆＃13;

// 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;
}

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

占位符逐字逐渐消失

1 个答案: