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

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

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

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

j

@gmail.com

ja

@gmail.com

jay

@gmail.com

---

突出显示的区域变灰，在输入框内不可点击这不是一个完整的答案，因为我不知道如何在输入文本为黑色时使“占位符”文本的颜色始终为灰色，但如果其他人可以将其推过门柱，这可能是答案的开始。我用两个文本框叠在一起。顶部的不透明度为零，是您实际输入文本的位置。下一个从上一个获取值，并将占位符文本添加到其中

HTML

JS

---

有问题吗？请查看jQuery掩码插件。也许这可以解决你的问题。

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

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

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