Кнопка и горячие клавиши браузера

424
11 мая 2017, 12:57

Создал <button> и хочу, чтобы она активизировала встроенный в браузер hotkey,в моем случае нужна функция (Ctrl+S) для сохранения уже загруженной страницы. Можно как нибудь написать в javascript функцию для активации (Ctrl+S) посредством нажатия на <button>.

Answer 1

В общем, нашел два вопроса на большом SO:

  • Is it possible to simulate key press events programmatically?
  • Keydown Simulation in Chrome fires normally but not the correct key

Проблем с имитацией нажатия одной кнопки нет, все прекрасно работает и для первого случая и для второго. Но вот в чем беда - комбинация клавиш - не работает как хотелось бы. Почитав документацию по KeyboardEvent.initKeyEvent

ctrlKeyArg - Is a Boolean that is true if the virtual key to be generated is a combination of keys containing the Ctrl key.

что в моем понимании, если укажем true, то событие представляет собой комбинацию клавиш, содержащих клавишу Ctrl (вроде бы проблем с английским нет). Ставим true - и желаемой комбинации не происходит. Но вот если указать ctrlKeyArg, altKeyArg, shiftKeyArg и metaKeyArg в значение true, то произойдет желаемое событие совместно с Ctrl.

Теперь к коду, привожу код, который имитирует нажатие Ctrl+S. Для наглядности добавил addEventListener на событие keydown, чтобы убедиться в том, что была нажата комбинация клавиш Ctrl+S:

document.addEventListener("keydown", function(e) { 
  e = e || window.event; 
  var key = e.which || e.keyCode; 
  var ctrl = e.ctrlKey ? e.ctrlKey : ((key === 17) ? true : false); 
  if (key == 83 && ctrl) { // ctrl+s 
    console.log('ctrl+s'); 
  } 
}, false); 
 
Podium = {}; 
Podium.keydown = function(k) { 
  var oEvent = document.createEvent('KeyboardEvent'); 
 
  Object.defineProperty(oEvent, 'keyCode', { 
    get: function() { return this.keyCodeVal; } 
  }); 
 
  Object.defineProperty(oEvent, 'which', { 
    get: function() { return this.keyCodeVal; } 
  }); 
 
  if (oEvent.initKeyboardEvent) { 
    oEvent.initKeyboardEvent("keydown", true, true, window, true, true, true, true, k, k); 
  } else { 
    oEvent.initKeyEvent("keydown", true, true, window, true, true, true, true, k, 0); 
  } 
 
  oEvent.keyCodeVal = k; 
  document.dispatchEvent(oEvent); 
} 
 
function func() { 
  Podium.keydown(83); 
}
<button onclick="func();">btn</button>

И самое главное в завершении - диалоговое окно для сохранения страницы не всплывает, хотя имитируется нажатие Ctrl+S.

READ ALSO
WordPress Ajax загрузка файлов

WordPress Ajax загрузка файлов

Добрый день коллеги, возникла необходимость в форме которая отправляется с помощью Ajax переслать файл, что увидел c использованием jQuery: jqueryjs?ver=1

299
Карты изображения + javascipt

Карты изображения + javascipt

Есть картинка и внутри этой картинки сделал ссылки (image map) через кодНо при клике ссылка не передает значение в поле input с айдишником zubn

250
Несколько БД для приложения на Meteor

Несколько БД для приложения на Meteor

Доброе время сутокЕсть два приложения на метеоре(А и Б)

233