HTML terminal like text input

Question

I am trying to have a form field (just a normal html text input box) which can be typed in and have the value changed but renders the text as invisible.

I need the box to be visible so visibility: hidden; or display: none; won't do the trick.

I can't just make the text the same color as the background because the background is not a single color. I need the text to be invisible while the rest of the input remains visible.

The effect I am trying to achieve is like when you type a password in the terminal and it accepts input but shows no feedback (this is not for a password though).

Answer 1

I can't just make the text the same color as the background because the background is not a single color.

What about a transparent color?

Does this help?

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

JSBin Demo #1

---

Update:

I implemented @Shomz idea, You can simply keep the cursor at the beginning or change all the characters to *. I've used jQuery to bind event:

jQuery Version:

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

Pure JavaScript version? Sure!

That's a long story, check the demo.

JSBin Demo #3

Answer 2

If you want to keep the cursor at the beginning of the field all the time (not showing blank spaces when user types something), you can use JavaScript to send the input characters into another input field with its type set to hidden, while clearing up the original input field at the same time. You need the keyUp listener for that.

And if you want to stick to HTML/CSS, I'm afraid the only way is to set the text color the same as the background color, but then the cursor will move and you'll see those blank spaces I mentined above (see @Hashem's answer).