問題
添付の「保存」ボタンの代わりにフォームでデータを編集するとき、通常のCtrl + Sを押したい場合があります。 これにより、常に現在のhtmlページを保存するように求める標準のブラウザダイアログが表示されます。JavaScriptを使用して、試してみましょう。
*保存ダイアログの表示をブロックします。
*キーストロークをキャッチして、クライアント関数を実行します。たとえば、データをajax送信することができます。
ブラウザで標準イベント処理をブロックするには、次を使用します。
* イベントオブジェクトのpreventDefault()メソッド。 GeckoおよびOperaでサポートされています。
* イベントオブジェクトのreturnValueプロパティ。IEでサポートされています。
HTMLコードを再度変更しないように、特別な
addHandler
関数を使用し
addHandler
ハンドラー
addHandler
ますブラウザーに応じて、 keydown イベントまたはkeypressイベントに対してブロッキングが実行されます。 保存ダイアログが終了したら、好きな関数を呼び出すことができます。
コード
//
function addHandler(object, event, handler, useCapture) {
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
//
var ua = navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1);
var isGecko = (ua.indexOf("gecko") != -1);
//
if (isIE) addHandler (document, "keydown", hotSave);
else addHandler (document, "keypress", hotSave);
function hotSave(evt) {
// event
evt = evt || window.event;
var key = evt.keyCode || evt.which;
// Ctrl+S
key = String.fromCharCode(key).toLowerCase() == "s";
if (evt.ctrlKey && key) {
//
if(evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
// ,
clientFunction();
//
window.focus();
return false;
}
}
function clientFunction() {
// - ...
}
Google CodeでホストされるjQueryのプラグイン
使用する
以下でテストされたパフォーマンス:* WIN: IE6、IE7;
* 勝利: FF 1.5、NN 7.1、NN 8.0、Mozilla 1.7;
* WIN: Opera 7.1、7.5、8.0、9.01、9.2;
* MAC: Mac OS X + FF3b5では動作することを書いています(ただし、Command + SではなくCtrl + Sがあります)。
動作しません:
* LinuxおよびMac OS XでのFoxでは、Ctrl + Sで保存する場合 修正にはブラウザのパッチが必要です。
上記のスクリプトは、Fledeデータベース編集システムで正常にテストされています 。 通常のCtrl + Sを押すと、ホスト上のデータベースが新しいデータを受信し、正しいページにとどまり、さらに書き込みます:-)
スクリプトが他のブラウザーまたはプラットフォームで機能しない場合は、コメントを書いてください!
ブラウザーでのCtrl + Sによるクロスポストの保存 c webew.ru