Question

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

您可以输入输入框...但是，无论您键入的内容对用户不可见
jQuery可以通过.keyup函数读取输入框中输入的内容。
您可以检测输入框何时失去焦点。
文本框中没有克拉

具体例子：

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]消息。当我点击 magicalBox 时，我收到[2]消息。

我尝试过的事情：

我可以得到2＆amp; 3通过在jQuery函数中设置 magicalBox .val（''），但有一个轻微的blip，你可以看到输入的文本。
将 magicalBox 标记为readonly似乎有助于获得1 2 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 culd实际上会破坏退格，我会考虑以下黑客攻击：

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

使用这些样式：

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

尽管如此，如果用户选择文本，它将出现。那不是什么神奇的......

如果你想认真对待这个，你可以改变SELECTION颜色，但这只能在Safari和Mozilla上运行（-moz-和可能的-webkit-，但我不确定最后一个）：

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

显然，只是为了记录，简单的Hack就是在盒子上放置一个绝对定位的DIV，宽度和高度相同，再加上background-color: #FFF;。这需要一些工作来让用户输入在场上（当你点击DIV时焦点，但它应该仍然很容易。但是，这是一个黑客，哪种类型的失败了调用它的目的魔法。

编辑：还有一件事。如果color与background-color

相同，则显示您正在键入的位置的小条将消失

我希望它有所帮助。这不是一个明确的解决方案，但我相信这是一个巨大的进步。 ^^

输入时隐藏输入

2 个答案: