Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2020, 17:52
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Отключить сохранение при комбинации Ctrl + S
Здравствуйте!
Мне нужно при комбинации клавишь Ctrl + S отключить сохранение страницы браузера, а вместо этого вызвать свой метод.

Пока сделал такую структуру кода и остановился на отключении сохранения страницы:
const app = {
    event() {
        document.addEventListener('keydown', this.keyboard.bind(this));
    },

    keyboard(e) {
        function listenerS(e) {
            if (e.code === 'KeyS') {
                this.save_options();
            }
            else document.removeEventListener('keyup', listenerS.bind(this));
        }
        
        if (e.key === 'Control') {
            document.addEventListener('keyup', listenerS.bind(this));
        }
    },

    save_options() {
        // ...Метод вызываемый при нажатии Ctrl + S
    }
}

app.event();

Собственно вопрос: как отключить сохранение при комбинации Ctrl+S ?

Так же прошу подсказать и наставить на путь истинный по вопросу какие клавиши добавить не для Windows систем. В общем задача такая чтобы при нажатии Ctrl + S (или равнозначной комбинации в др. осях) вызывать свой метод, а не сохранение страницы.
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2020, 22:26
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Как то сложновато все.
А почему не просто

document.addEventListener('keydown', (ev) => {
	if (ev.code == 'KeyS' && ev.ctrlKey) {
		ev.preventDefault();
		save_options();    // alert ('Ctrl+S')
	}
  });


В любом случае ev.preventDefault()
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2020, 07:20
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от voraa
В любом случае ev.preventDefault()
Спасибо! Теперь работает, косяков не вижу:
const app = {
    event() {
        document.addEventListener('keydown', this.keyboard.bind(this));
    },

    keyboard(e) {
        if (e.code == 'KeyS' && e.ctrlKey) {
            e.preventDefault();

            this.save_options();
        }
    },

    save_options() {
        // ...Метод вызываемый при нажатии Ctrl + S
    }
}

app.event();


А для Мас не подскажите, там вроде кнопки Ctrl нету, а вместо неё кнопка Cmd (если не ошибаюсь).
Как эту кнопку правильно прописать?
Ответить с цитированием
  #4 (permalink)  
Старый 06.04.2020, 07:28
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Сообщение от MC-XOBAHCK Посмотреть сообщение
А для Мас не подскажите, там вроде кнопки Ctrl нету, а вместо неё кнопка Cmd (если не ошибаюсь).
Как эту кнопку правильно прописать?
ev.metaKey
На MAC это клавиша Command, на Win - клавиша Windows.

Последний раз редактировалось voraa, 06.04.2020 в 07:32.
Ответить с цитированием
  #5 (permalink)  
Старый 06.04.2020, 07:40
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Спасибо!
if ((e.code == 'KeyS' && e.ctrlKey) || (e.code == 'KeyS' && e.metaKey))

Надеюсь правильно записал.

А такой вариант записи условия не будет ошибкой:
if (e.code == 'KeyS' && ( e.ctrlKey || e.metaKey))

или здесь будет уже не та логика которая нужна?
Ответить с цитированием
  #6 (permalink)  
Старый 06.04.2020, 07:55
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Увидел отредактированное сообщение, то есть получается в условии достаточно прописать:
if (e.code == 'KeyS' && e.metaKey) {}

и работать будет для всех систем. Я правильно понял?
Ответить с цитированием
  #7 (permalink)  
Старый 06.04.2020, 07:57
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Логика та же.
Но есть один момент. meatKey - это клавиша Win на винде.
Win+S тоже чего то там вызывает из системных приложений.
Что бы не заблокировать это придется проверять, что у нас за система Mac или Win
Обычно проверяют так

let isMac = navigator.appVersion.toUpperCase().indexOf("MAC")>-1

Но свойство appVersion обозначено, как устаревшее, а вместо него нужно использовать platform.
Думаю, не будет ошибкой написать

let isMac = navigator.platform?
navigator.platform.toUpperCase().indexOf("MAC")>-1
: navigator.appVersion.toUpperCase().indexOf("MAC")>-1

Ну а дальше

if (e.code == 'KeyS' && ( isMac && e.metaKey || e.ctrlKey))

Последний раз редактировалось voraa, 06.04.2020 в 08:03.
Ответить с цитированием
  #8 (permalink)  
Старый 06.04.2020, 07:59
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,745

Сообщение от MC-XOBAHCK Посмотреть сообщение
Увидел отредактированное сообщение, то есть получается в условии достаточно прописать:
if (e.code == 'KeyS' && e.metaKey) {}

и работать будет для всех систем. Я правильно понял?
Совсем нет. На Винде это не Ctrl, а клавиша Windows (рядом с Ctrl с эмблемой Винды)
Ответить с цитированием
  #9 (permalink)  
Старый 06.04.2020, 08:13
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от voraa
let isMac = navigator.platform?
navigator.platform.toUpperCase().indexOf("MAC")>-1
: navigator.appVersion.toUpperCase().indexOf("MAC")>-1


Ну а дальше

if (e.code == 'KeyS' && ( isMac && e.metaKey || e.ctrlKey))
Проверил на Windows - работает. На маке проверить нет возможности.

Спасибо большое за помощь!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 16:15
getAllResponseHeaders() и status имеют смысл только при readyState==4? mister_maxim AJAX и COMET 7 27.03.2011 19:08
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Можно ли отключить остановку javascript при ошибке в IE6 ? limonad Internet Explorer 0 28.01.2010 18:04
Отключить передачу cookie при ajax запросе. С.Тарасов AJAX и COMET 15 30.11.2009 15:24