创建未在输入 html 中删除的类似占位符的函数

Question

占位符很好。 在创建用户友好的输入组件时，它使我们的生活更轻松。

我现在要做的是在我的输入中创建类似文本的占位符，在输入文本时不会删除该文本。

示例）当我输入我的电子邮件地址时，@gmail.com 将在我输入的文本后显示为灰色。 但是，它就像一个占位符，因此您无法选择/拖动或更改值

@gmail.com
贾@gmail.com
周杰伦@gmail.com

输入框内高亮区域变灰且不可点击

Answer 1

这不是一个完整的答案，因为我无法弄清楚如何在输入的文本为黑色时使“占位符”文本的颜色始终为灰色，但如果其他人可以推动，这可能是答案的开始它在球门柱上的其余部分。 我使用了两个堆叠在一起的文本框。 顶部的不透明度为零，是您实际输入文本的那个。 底部的取顶部的值并向其添加占位符文本。

https://jsfiddle.net/c4L76tzu/14/

HTML

<input id="secret" type="text" size="15" />
<input id="open" type="text" size="15" value="@gmail.com"/>

CSS

#secret {
  position: absolute;
  top: 0px;
  opacity: 0;
  z-index: 2;
}
#open {
  position: absolute;
  top: 0px;
  z-index: 1;
}

JS

document.getElementById("secret").oninput = function() {BleedThru()};
function BleedThru() {
  var secret = document.getElementById("secret");
  var open = document.getElementById("open");
  open.value = secret.value + "@gmail.com";
  console.log(open.value);
}