HTML terminal as text input

Question

I am trying to have a form field (only a normal html text input field) that can enter and change a value, but makes the text invisible.

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

I cannot just make the text the same color as the background, because the background is not the same color. I need the text invisible while the rest of the input remains visible.

The effect I'm trying to achieve is similar to the way you enter the password in the terminal and accept the input, but don’t see the feedback (although this is not a password).

Answer 1

I cannot just make the text the same color as the background, because the background is not the same color.

What about transparent color?

Does it help?

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

JSBin Demo # 1

---

Update:

I implemented @Shomz idea, you can just keep the cursor at the beginning or change all characters to * . I used jQuery to bind the 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 version of JavaScript? Sure!

This is a long story, check out the demo.

JSBin Demo # 3

Answer 2

If you want to constantly keep the cursor at the beginning of the field (without displaying spaces when the user enters something), you can use JavaScript to send input characters to another input field with the type set to hidden, while clearing the original input field. To do this, you need a keyUp listener.

And if you want to stick with HTML / CSS, I’m afraid that the only way is to set the text color to the same as the background color, but then the cursor will move and you will see those spaces that I have outlined above (see @Hashem answer).

Answer 3

Have you tried to set the transparency of the color of the input field?

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