4

我正在尝试有一个表单字段（只是一个普通的 html 文本输入框），可以输入它并更改值但将文本呈现为不可见。

我需要让盒子可见，visibility: hidden;否则display: none;不会成功。

我不能只使文本与背景颜色相同，因为背景不是单一颜色。我需要文本是不可见的，而其余的输入仍然可见。

我想要达到的效果就像您在终端中输入密码并且它接受输入但不显示任何反馈（虽然这不是密码）。

4

3 回答 3

5

我不能只使文本与背景颜色相同，因为背景不是单一颜色。

一个transparent颜色呢？

这有帮助吗？

input[type="text"] {
  color: transparent;
}

JSBin 演示 #1

更新：

我实现了@Shomz 的想法，您可以简单地将光标保持在开头或将所有字符更改为*. 我曾经jQuery绑定事件：

jQuery版本：

var holder = [], exceptions = [13];

var hideChar = function(elm) {
  elm.value = '';
  // Or
  // elm.value = elm.value.replace(/[^*]/,  '*');
};

$('#console').keydown(function(e) {
  if (e.which === 8) {
    holder.pop();
  }

}).keypress(function(e) {
  if ($.inArray(e.which, exceptions) === -1) {
    holder.push(String.fromCharCode(e.which));
  }
  var _this = this;
  setTimeout(function() {
    hideChar(_this);
  }, 1);

}).keyup(function() {
  $('#holder').val(holder.join(''));
});

HTML：

<input id="console" type="text" value="">
<input id="holder" type="hidden">

JSBin 演示 #2

纯 JavaScript 版本？ 当然！

这是一个很长的故事，请查看演示。

JSBin 演示 #3

于 2013-08-10T17:52:02.810 回答
2

如果您想始终将光标保持在字段的开头（当用户键入内容时不显示空格），您可以使用 JavaScript 将输入字符发送到其类型设置为隐藏的另一个输入字段，同时清除原始输入字段同时进行。为此，您需要 keyUp 侦听器。

如果你想坚持使用 HTML/CSS，恐怕唯一的方法就是将文本颜色设置为与背景颜色相同，但是光标会移动，你会看到我上面提到的那些空格（见@Hashem 的回答）。

于 2013-08-10T17:52:12.987 回答
1

您是否尝试将输入字段的颜色设置为透明？

<input style="color:transparent;"></input>
于 2013-08-10T17:53:05.587 回答