2011-07-07 8 views
7

私は、オーディオが再生され、大きなテキストボックスにテキストを入力するはずのオーディオに基づいてJavaScriptゲームを構築しています。 JavaScriptを使用して回答を採点し、テキストボックスをクリアして次のオーディオクリップに備えます。エスケープボタンの効果をHTML入力に取り消すにはどうしたらいいですか?

問題:いくつかのケースでは、空の<input type="text" />以内に焦点を当てながら、esc(エスケープ)キーを押すと、テキストボックスには、いくつかの古いテキストが移入されます。

私はMooToolsを使用していて、keypress、keydown、およびkeyup内で運がない場合event.stop()(伝播を停止し、preventDefaultも実行)を試みました。

[esc]ボタンがテキストボックス内の値を変更しないようにするにはどうすればよいですか?

+0

他にも問題があるようです。 escをキャンセルしても効果はありません。 – Mrchief

+0

注:Firefox 5でこの問題が発生しました。 – philfreo

+0

[この回答](http://stackoverflow.com/a/10275286/2131505)を参照してください。デフォルトアクションを防止するkeydownハンドラを追加すると、この問題がより良い方法で解決されます。 – Chen

答えて

4

入力ボックスにblur()と入力してからfocus()を呼び出すだけで修正できました。 Firefoxの問題を少なくとも解決しました。エスケープが行われるために必要とされるものを行うと、それは私のためのFirefox 25で問題を解決し、エンドreturn false;

で検出

2

興味深い問題を(私は、オーディオを再生するキーボードショートカットとして、[ESC]キーを使用していますので、これは重要です) - それはChromeを例えばIEで起こるではなく。ここで私がChromeとIEでテストした解決策があります(うまくいくようです)。

拡張版:

スクリプトのページヘッダー内:

'testinputは' 私たちが脱出不能にされて入力され
<script> 
var buff; //Must have global scope 
var input = document.getElementById("testinput"); //Defined here to save cpu (instead of on every key press). 
function CheckPreBuff(e) 
{ 
    var ev = window.event ? event : e; //Get the event object for IE or FF 

    var unicode = (typeof(ev.keyCode) != "undefined")? ev.keyCode : ev.charCode; 
    if(unicode != 27) buff = input.value; //The 'escape' key has a unicode value of 27 
    else input.value = buff; //Only set the input contents when needed, so not to waste cpu. 
} 
</script> 

。 testinputのHTMLは以下の通りです:

<input id="testinput" onkeypress="CheckPreBuff();" onkeyup="CheckPreBuff();" type="text"/> 

お知らせ「の両方onkeyupの」と「onkeypressでは」が使用された - エスケープキーがある一方で「onkeypressでは」を使用すると、一時的にテキストボックスが空白に行く防ぐものの、技術的にのみ「onkeyupの」は、必要とされていますうつ病。 (ご希望の場合)を手動+エラー防止+サポートされる複数の入力縮小さ

ヘッダー内

スクリプト:

<script> 
var buff = []; 
function InitCPB(obj){if(typeof(obj)=="undefined")return;buff[0]=obj;buff[1]="";obj.onkeypress=CPB;obj.onkeyup=CPB;} 
function CPB(e){if(typeof((buff[0]))=="undefined")return;var ev=window.event?event:e;(((typeof(ev.keyCode)!="undefined")?ev.keyCode:ev.charCode)!=27)?buff[1]=(buff[0]).value:(buff[0]).value=buff[1];} 
</script> 

testinputのhtmlタグ(idはもはや必要とされている):

どちらの方法も、次のキーが押される前にテキスト入力が含んでいたもののコピーを保持します。キープレースdが「エスケープ」、ユニコード27の場合は、前のテキスト入力がテキストボックスに戻されました(これは差別的ですので、キープレスごとにブラウザに負荷をかけすぎないようにします)。

2番目のバージョンでは、onFocus属性が上記のように設定されている限り(複数の要素が互いに干渉しない)、エスケープキーを無効にして同じページに複数のテキスト入力を行うことができます。 IEに心臓発作を与える誤った実装を防ぐために、それが定義されているオブジェクトをチェックします。

こちらがお役に立てば幸いです。

関連する問題