输入时隐藏输入

Question

我想知道输入框是否可能具有以下属性：

1. 你可以在输入框中输入..。但是，您输入的内容对用户来说是不可见的。
2. 输入框中输入的任何内容都可以由jQuery通过.keyup函数读取。
3. 您可以检测输入框何时失去焦点。
4. 文本框中没有克拉

具体的例子是：

HTML：

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

jQuery代码：

$('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");
}

理想:我在magicalBox中键入a，但在magicalBox中没有看到a。但是，在我的控制台中，我将看到1条消息。当我单击out of magicalBox时，我得到了2条消息。

我试过的是：

• 我可以通过在magicalBox.val('')函数中设置jQuery来获得2&3，但是在输入的文本中有一个微小的闪点。
• 将magicalBox标记为readonly似乎有助于获得12 3，但获得4似乎很难。从我在网上可以看到的情况来看，隐藏克拉的方法是设置onfocus="this.blur()"，但这阻止了我对盒子做任何事情。

任何建议都将不胜感激(.如果这是可能的话.)

Answer 1

答案是简单的，更改：

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

至：

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

通过将maxlength设置为0，您的意思是文本框中不允许任何字符，而且由于您的jQuery代码不关心文本框(只关心按下的键)，所以它不会影响输出。

如果这不起作用，请再次检查jQuery代码。

您所拥有的函数必须以});结尾，因为函数是从函数内部调用的。

Answer 2

由于将maxlength更改为0实际上会破坏回退空间，因此我会考虑以下问题：

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

有了这些风格：

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

尽管如此，如果用户选择文本，它将出现。这不是什么魔术..。

如果您想认真对待这一点，您可以更改选择颜色，但这只适用于Safari和Mozilla (-moz-可能还有-webkit，但我不确定最后一个)：

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

显然，为了记录在案，简单的Hack是将一个绝对位置的DIV放在盒子上，具有相同的宽度和高度加上background-color: #FFF;。这将需要一些工作才能使用户输入到字段(当您单击DIV时关注焦点，但这仍然应该很容易。尽管如此，这是一个黑客，这是一种失败的目的称为魔术。

编辑:还有一件事。如果color与background-color相同，闪烁显示键入位置的小条将消失

我希望这能帮上忙。这不是一个明确的解决方案，但我相信这是向前迈出的一大步。^^