【问题标题】：HTML terminal like text input类似于文本输入的 HTML 终端
【发布时间】：2013-08-12 10:46:59
【问题描述】：

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

我需要让该框可见，这样visibility: hidden; 或display: none; 就不会成功。

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

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

【问题讨论】：

刚刚更新了我的答案。希望对您有所帮助。

标签： javascript html css forms

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：