HTML终端就像文本输入一样

Question

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

我需要这个盒子是可见的,visibility: hidden;或者display: none;不会这样做.

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

我试图实现的效果就像在终端中输入密码并接受输入但没有反馈(这不是密码).

Answer 1

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

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