Hide Input when entered

Question

I'm wondering if it's possible for an input box to have the following properties:

1. You can type into the input box... However, whatever you type is not visible to the user
2. Whatever was typed into the input box can be read by jQuery via the .keyup function.
3. You can detect when the input box has lost focus.
4. No Carat in the textbox

For a concrete example:

HTML:

<input type="text" name="magicalBox">

jQuery Code:

$('input[name=magicalBox]').keyup(function(event){  
     console.log("[1] Received " + String.fromCharCode(event.keyCode));
}

$('input[name=magicalBox]').blur(function(){    
     console.log("[2] No Longer Using Magical Box");
}

Ideal: I type 'a' into magicalBox, but I do not see 'a' in magicalBox. However, in my console I will see the [1] message. When i click out of magicalBox, I get the [2] message.

What I've Tried:

• I can get 2 & 3 by setting magicalBox.val('') in the jQuery function, but there is a slight blip where you can see the inputted text.
• Marking magicalBox as readonly seems to help get 1 2 3, but getting 4 seems tough. From what I can see online, the way to hide the carat is to set onfocus="this.blur()", but this stops me from doing anything to the box.

Any advice would be greatly appreciated (... if this is even possible...)

Answer 1

The answer is simple, change:

<input type="text" name="magicalBox">

to:

<input type="text" name="magicalBox" maxlength="0">

By setting the maxlength to 0, you are saying that no characters are allowed in the text box, and since your jQuery code doesn't care about the text box (only about the keys that are pressed), it doesn't affect the output.

If this doesn't work, double check your jQuery code.
The functions you have, have to end with }); because the function is called from inside a function.

Answer 2

Since changing maxlength to 0 culd actually break backspace, I would consider the following hack:

<input type="text" name="magicalBox" class="magicalBox">​

With these styles:

.magicalBox {
    color: #FFF; background-color: #FFF;
}

Still, with this, if the user Selects the text it will appear. That's not much of a magic...

If you wanna be serious about this, you can change the SELECTION color, but this curently only works on Safari and Mozilla (-moz- and possibly -webkit-, but I'm not sure about the last):

.magicalBox::selection {
    background: #FFF;
}
.magicalBox::-moz-selection {
    background: #FFF;
}

And obviously, just for the record, the easy Hack would be to put an absolutely Positioned DIV over the box, with the same width and height, plus background-color: #FFF;. That would take some work to make the user input go on the field (Focus when you click on the DIV, but it should still be easy. Nevertheless, that IS a hack, which kinds of defeat the purpose of calling it Magic.

edit: Just one more thing. The little bar that blinks showing where you're typing will disappear if color is the same as background-color

And I hope it helps. It's not a definitive solution, but I believe it's quite a huge step forward. ^^