3

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

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

理想：我在 magicBox 中输入“a” ，但在magicBox 中看不到“a” 。但是，在我的控制台中，我会看到 [1] 消息。当我点击magicBox时，我收到 [2] 消息。

我试过的：

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

任何建议将不胜感激（......如果这甚至可能......）

4

2 回答 2

4

答案很简单，改：

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

到：

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

通过将 设置maxlength为 0，您是说文本框中不允许有任何字符，并且由于您的 jQuery 代码不关心文本框（只关心按下的键），因此它不会影响输出。

如果这不起作用，请仔细检查您的 jQuery 代码。
您拥有的函数必须以函数结尾，});因为该函数是从函数内部调用的。

于 2012-11-06T01:41:57.790 回答
1

由于更改maxlength为 0 culd 实际上会破坏退格，因此我会考虑以下 hack：

<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

我希望它有所帮助。这不是一个确定的解决方案，但我相信这是向前迈出的一大步。^^

于 2012-11-06T02:11:33.087 回答