Javascript HTML终端类文本输入

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

我需要框可见，所以

可见性：隐藏或
显示：无不会起作用

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

我试图达到的效果就像在终端中键入密码，它接受输入但不显示反馈（但这不是密码）

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

透明的
颜色怎么样

这有用吗

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



更新：
我实现了@Shomz idea，您只需将光标保持在开头，或将所有字符更改为
*
。我使用了
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(''));
});

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

HTML:

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

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




纯JavaScript版本？当然

说来话长，看看演示

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

如果你想坚持使用HTML/CSS，恐怕唯一的方法就是将文本颜色设置为与背景颜色相同的颜色，但是光标会移动，你会看到上面提到的空白区域（参见@Hashem的答案）。
你试过将输入字段的颜色设置为透明吗

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

刚刚更新了我的答案。希望能有帮助。