类似HTML终端的文本输入

HTML terminal like text input

本文关键字：文本 输入 终端 HTML 类似      更新时间：2023-09-26

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

我需要盒子是可见的，这样visibility: hidden;或display: none;就不会起作用。

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

我试图达到的效果是，当你在终端中键入密码时，它接受输入，但没有显示任何反馈（但这不是针对密码的）。

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

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

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

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

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

<input style="color:transparent;"></input>
相关文章：