Question

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

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

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

j @gmail.com
JA @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);
}

创建一个类似于占位符的函数，该函数未在输入html中删除

1 个答案: