admin管理员组

文章数量:1335597

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).

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).

• javascript
• html
• css
• forms

Share Improve this question Follow edited Feb 23, 2014 at 16:58 Hashem Qolami 99.6k2727 gold badges155155 silver badges165165 bronze badges asked Aug 10, 2013 at 17:47 hackartisthackartist 5,26455 gold badges3535 silver badges5050 bronze badges 1

• Just updated my answer. Hope it helps. – Hashem Qolami Commented Aug 10, 2013 at 18:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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).

Have you tried setting the color of the input field to transparent?

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

本文标签： javascriptHTML terminal like text inputStack Overflow