3

入力ボックスが次のプロパティを持つことが可能かどうか疑問に思っています:

  1. 入力ボックスに入力できます...ただし、入力した内容はユーザーには表示されません
  2. 入力ボックスに入力されたものは何でも、.keyup 関数を介して jQuery で読み取ることができます。
  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」と入力しましたが、 magicalBoxに「a」が表示されません。ただし、コンソールには [1] メッセージが表示されます。magicBoxをクリックすると、[2] メッセージが表示されます。

私が試したこと：

  • jQuery関数にmagicalBox .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">

0に設定するmaxlengthと、テキストボックスに文字を使用できないことを意味します。また、jQueryコードはテキストボックスを考慮しないため（押されたキーのみを考慮します）、出力には影響しません。

これが機能しない場合は、jQueryコードを再確認してください。関数は関数内から呼び出されるため、
持っている関数はで終了する必要があります。});

于 2012-11-06T01:41:57.790 に答える
1

0 culd に変更maxlengthすると実際にバックスペースが壊れるので、次のハックを検討します。

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

DIVそして明らかに、簡単なハックは、同じ幅と高さで、ボックスの上に絶対配置を配置することbackground-color: #FFF;です。ユーザー入力をフィールドに移動させるには多少の作業が必要です ( をクリックするときにフォーカスしますが、DIVそれでも簡単なはずです。それでも、それはハックであり、マジックと呼ぶ目的を無効にします。

編集：もう1つだけ。入力している場所を示す点滅する小さなバーcolorは、background-color

そして、それが役立つことを願っています。これは決定的な解決策ではありませんが、非常に大きな前進だと思います。^^

于 2012-11-06T02:11:33.087 に答える