更新

Question

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

我需要显示该框，因此visibility: hidden;或display: none;无法完成此操作。

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

我想要实现的效果就像在终端中输入密码并接受输入但没有反馈（但这不是密码）。

Answer 1

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

transparent颜色怎么样？

这有帮助吗？

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

<强> JSBin Demo #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 Demo #2

纯JavaScript版本？ 当然！

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

<强> JSBin Demo #3

Answer 2

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

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

Answer 3

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

<input style="color:transparent;"></input>

HTML终端就像文本输入一样

3 个答案:

更新