私は、td セルをクリックすると、td の現在の値に設定されたテキスト入力 (または選択/オプション ドロップダウン) が作成され、テキスト入力にフォーカスが与えられるサイトで作業しています。
このバージョンでは、td をクリックしてコンテンツをテキスト入力に入れ、場合によっては編集し、Enter キーを押すか、別の場所をクリックするか、ウィンドウを変更してぼかして td に保存できます。
http://jsbin.com/emuneq/7/edit#source
問題は、マウスアップでクリックが発生し、マウスダウンでぼかしが発生するため、マウスダウンとマウスアップの間でテーブルのサイズが自動的に変更されることです。
これは、最初の黄色のセルをクリックして (マウスを離すとテキスト フィールドが作成されます)、セル 2 でマウスをゆっくりクリックして離すと確認できます。表のセルのサイズを変更し、リリースするとセル 3 に移動します。クリックが機能するには、mousedown と mouseup のオブジェクトが同じである必要がありますが、マウスダウンはセル 2 で行われ、マウスアップはセル 3 で行われたため、クリックは検出されません。
このバージョンでは、mouseup イベントを使用します。
http://jsbin.com/emuneq/8/edit#source
セル 1 をクリックしてからセル 2 をマウスダウンすると (前のテキスト フィールドがぼやけます)、同じ位置に留まると、セル 3 の上でマウスアップすると、セル 3 にテキスト フィールドが作成されます。
私がしたいのは、テーブルの列のサイズが変更される前に、マウスダウン時にテキスト フィールドの作成が行われることです。
このバージョンでは、mousedown イベントを使用します。
http://jsbin.com/emuneq/13/edit#source
「e.preventDefault();」を追加しました mousedown 関数へ - これがないと、blur 関数が mousedown の動作を停止します。
「focus()」を使用すると、テキスト フィールドの左側にテキストを入力するか、削除を押すことができますが、カーソルを移動したりテキストを選択したりするためのマウス クリックは完全に無視されているように見えますが、矢印キー。
IE7 と IE8 では、Enter キーを押したことを検出しますが、マウスを使用してテキスト入力フォーカスを与えるまで、最初は何も入力できません。マウスを使用して、テキストを強調表示したり、テキスト カーソルを移動したりすることもできます。
しかし、IE9 と Firefox 11 では、テキスト入力はマウスを無視します。Chrome 19 では、focus() はテキストを強調表示しますが、マウスも完全に無視します。
とにかく、前のリンクは、テキスト フィールドでマウスを無視することを除けば、ほぼ完璧です (IE7 と IE8 を除く)。
テキスト フィールドの代わりに選択/オプション ドロップダウンを使用するバージョンを次に示します。
http://jsbin.com/emuneq/15/edit#source
これは以前と同様にマウスダウンを使用しますが、ドロップダウンは IE9、Firefox、および Chrome ではまったく開きません。それらは IE7 および IE8 で正常に動作します。