วิธีข้ามเบราว์เซอร์ที่ดีที่สุดในการจับภาพ CTRL + S ด้วย JQuery

ผู้ใช้ของฉันต้องการกดCtrl+ Sเพื่อบันทึกแบบฟอร์ม มีวิธีข้ามเบราว์เซอร์ที่ดีในการจับภาพชุดCtrl+ Sและส่งแบบฟอร์มของฉันหรือไม่

แอปสร้างขึ้นบน Drupal ดังนั้นจึงสามารถใช้ jQuery ได้

$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    alert("Ctrl-S pressed");
    event.preventDefault();
    return false;
});

รหัสคีย์อาจแตกต่างกันระหว่างเบราว์เซอร์ดังนั้นคุณอาจต้องตรวจสอบมากกว่า 115 ข้อ

สิ่งนี้ใช้ได้กับฉัน (ใช้ jquery) เพื่อโอเวอร์โหลดCtrl+ S, Ctrl+ FและCtrl+ G:

$(window).bind('keydown', function(event) {
    if (event.ctrlKey || event.metaKey) {
        switch (String.fromCharCode(event.which).toLowerCase()) {
        case 's':
            event.preventDefault();
            alert('ctrl-s');
            break;
        case 'f':
            event.preventDefault();
            alert('ctrl-f');
            break;
        case 'g':
            event.preventDefault();
            alert('ctrl-g');
            break;
        }
    }
});

คุณสามารถใช้ไลบรารีทางลัดเพื่อจัดการกับสิ่งที่เฉพาะเจาะจงของเบราว์เซอร์

shortcut.add("Ctrl+S",function() {
    alert("Hi there!");
});

วิธีการแก้ปัญหา jQuery นี้ทำงานสำหรับฉันใน Chrome และ Firefox สำหรับทั้งCtrl+ Sและ+CmdS

$(document).keydown(function(e) {

    var key = undefined;
    var possible = [ e.key, e.keyIdentifier, e.keyCode, e.which ];

    while (key === undefined && possible.length > 0)
    {
        key = possible.pop();
    }

    if (key && (key == '115' || key == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 

อันนี้ใช้งานได้กับฉันใน Chrome ... ด้วยเหตุผลบางอย่างevent.whichส่งคืนทุน S (83) สำหรับฉันไม่แน่ใจว่าทำไม (โดยไม่คำนึงถึงสถานะการล็อคแคป) ดังนั้นฉันจึงใช้fromCharCodeและtoLowerCaseอยู่ในที่ปลอดภัย

$(document).keydown(function(event) {

    //19 for Mac Command+S
    if (!( String.fromCharCode(event.which).toLowerCase() == 's' && event.ctrlKey) && !(event.which == 19)) return true;

    alert("Ctrl-s pressed");

    event.preventDefault();
    return false;
});

หากใครรู้ว่าทำไมฉันถึงได้83และไม่ใช่115ฉันก็ยินดีที่จะได้ยินเช่นกันถ้ามีคนทำการทดสอบบนเบราว์เซอร์อื่นฉันก็ยินดีที่จะได้ยินถ้ามันใช้งานได้หรือไม่

ฉันรวมตัวเลือกต่าง ๆ เพื่อรองรับ FireFox, IE และ Chrome ฉันได้อัปเดตแล้วเพื่อให้รองรับ mac ได้ดียิ่งขึ้น

// simply disables save event for chrome
$(window).keypress(function (event) {
    if (!(event.which == 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which == 19)) return true;
    event.preventDefault();
    return false;
});

// used to process the cmd+s and ctrl+s events
$(document).keydown(function (event) {
     if (event.which == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
        event.preventDefault();
        save(event);
        return false;
     }
});

ฉันต้องการให้เว็บแอปพลิเคชันไม่แทนที่คีย์ลัดเริ่มต้นของฉันโดยสุจริต Ctrl+ Sทำอะไรบางอย่างในเบราว์เซอร์แล้ว การมีการเปลี่ยนแปลงนั้นขึ้นอยู่กับเว็บไซต์ที่ฉันกำลังดูอยู่นั้นก่อกวนและน่าหงุดหงิด ฉันเคยมีเว็บไซต์จี้Ctrl+ TabเพราะมันดูเหมือนกับCtrl+ Iทั้งทำให้งานของฉันในไซต์เสียหายและทำให้ฉันไม่สามารถสลับแท็บได้ตามปกติ

หากคุณต้องการแป้นพิมพ์ลัดให้ใช้accesskeyคุณสมบัติ กรุณาอย่าทำลายฟังก์ชั่นเบราว์เซอร์ที่มีอยู่

@Eevee: เนื่องจากเบราว์เซอร์กลายเป็นบ้านของฟังก์ชันการทำงานที่สมบูรณ์ยิ่งขึ้นและเริ่มแทนที่แอพเดสก์ท็อปมันจะไม่เป็นตัวเลือกที่จะยกเลิกการใช้แป้นพิมพ์ลัด ชุดคำสั่งแป้นพิมพ์ที่หลากหลายและใช้งานง่ายของ Gmail เป็นเครื่องมือที่ฉันตั้งใจจะละทิ้ง Outlook แป้นพิมพ์ลัดใน Todoist, Google Reader และ Google Calendar ล้วนทำให้ชีวิตของฉันง่ายขึ้นมากขึ้นทุกวัน

นักพัฒนาควรระวังไม่ให้แทนที่การกดแป้นที่มีความหมายในเบราว์เซอร์แล้ว ตัวอย่างเช่นกล่องข้อความ WMD ที่ฉันกำลังพิมพ์แปลความหมายCtrl+ Delเป็น "Blockquote" อย่างลึกลับแทน "ลบคำไปข้างหน้า" ฉันอยากรู้ว่ามีรายการมาตรฐานทางลัด "ปลอดภัยสำหรับเบราว์เซอร์" ที่นักพัฒนาไซต์สามารถใช้งานได้หรือไม่และเบราว์เซอร์จะให้คำมั่นว่าจะไม่อยู่ในเวอร์ชันต่อ ๆ ไป

$(document).keydown(function(e) {
    if ((e.key == 's' || e.key == 'S' ) && (e.ctrlKey || e.metaKey))
    {
        e.preventDefault();
        alert("Ctrl-s pressed");
        return false;
    }
    return true;
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try pressing ctrl+s somewhere.

นี้เป็นรุ่นที่ขึ้นไปวันที่ @ คำตอบของ AlanBellows แทนที่ด้วยwhich keyนอกจากนี้ยังสามารถใช้งานได้กับปุ่มลัดของ Chrome (ซึ่งหากคุณกดCtrl+ Sมันจะส่งตัวพิมพ์ใหญ่ S แทนตัวอักษร) ใช้งานได้ในเบราว์เซอร์ที่ทันสมัยทั้งหมด

นี่เป็นวิธีแก้ปัญหาของฉันซึ่งอ่านง่ายกว่าคำแนะนำอื่น ๆ ที่นี่สามารถรวมคีย์ผสมอื่น ๆ ได้อย่างง่ายดายและผ่านการทดสอบบน IE, Chrome และ Firefox:

$(window).keydown(function(evt) {
    var key = String.fromCharCode(evt.keyCode);
    //ctrl+s
    if (key.toLowerCase() === "s" && evt.ctrlKey) {
        fnToRun();
        evt.preventDefault(true);
        return false;
    }
    return true;
});

ฉันชอบปลั๊กอินเล็ก ๆนี้ มันต้องการความเป็นมิตรของเบราว์เซอร์ที่เพิ่มขึ้นอีกเล็กน้อย

สิ่งนี้ควรใช้งานได้ (ดัดแปลงมาจากhttps://stackoverflow.com/a/8285722/388902 )

var ctrl_down = false;
var ctrl_key = 17;
var s_key = 83;

$(document).keydown(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = true;
}).keyup(function(e) {
    if (e.keyCode == ctrl_key) ctrl_down = false;
});

$(document).keydown(function(e) {
    if (ctrl_down && (e.keyCode == s_key)) {
        alert('Ctrl-s pressed');
        // Your code
        return false;
    }
}); 

ตัวอย่าง:

shortcut.add("Ctrl+c",function() {
    alert('Ok...');
}
,{
    'type':'keydown',
    'propagate':false,
    'target':document
});

การใช้

<script type="text/javascript" src="js/shortcut.js"></script>

ลิงค์สำหรับดาวน์โหลด: http://www.openjs.com/scripts/events/keyboard_shortcuts/#

ถึงคำตอบของ Alan Bellows:! (e.altKey) สำหรับผู้ใช้ที่ใช้AltGrเมื่อพิมพ์ (เช่นโปแลนด์) หากไม่มีการกดAltGr+ Sจะให้ผลเหมือนกับCtrl+S

$(document).keydown(function(e) {
if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey) && !(e.altKey))
{
    e.preventDefault();
    alert("Ctrl-s pressed");
    return false;
}
return true; });

ปลั๊กอินนี้สร้างโดยฉันอาจมีประโยชน์

เสียบเข้าไป

คุณสามารถใช้ปลั๊กอินนี้คุณต้องระบุรหัสคีย์และฟังก์ชั่นเพื่อเรียกใช้เช่นนี้

simulatorControl([17,83], function(){
 console.log('You have pressed Ctrl+Z');
});

ในรหัสที่ฉันได้แสดงวิธีการดำเนินการสำหรับ+Ctrl Sคุณจะได้รับเอกสารรายละเอียดเกี่ยวกับลิงค์ ปลั๊กอินอยู่ในส่วนรหัส JavaScript ของปากกาของฉันบน Codepen

ฉันแก้ไขปัญหาของฉันในIEโดยใช้alert("With a message")เพื่อป้องกันพฤติกรรมเริ่มต้น:

window.addEventListener("keydown", function (e) {
    if(e.ctrlKey || e.metaKey){
        e.preventDefault(); //Good browsers
        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { //hack for ie
            alert("Please, use the print button located on the top bar");
            return;
        }
    }
});