feat: modify filter function on readOnly element (#73)

dist/hotkeys.common.js

@@ -159,13 +159,19 @@ function getScope() {
 function getPressedKeyCodes() {
   return _downKeys.slice(0);
 } // 表单控件控件判断 返回 Boolean
+// hotkey is effective only when filter return true
 
 
 function filter(event) {
   var target = event.target || event.srcElement;
-  var tagName = target.tagName; // 忽略这些情况下快捷键无效
+  var tagName = target.tagName;
+  var flag = true; // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
 
-  return !(tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' || target.isContentEditable);
+  if (target.isContentEditable || tagName === 'TEXTAREA' || (tagName === 'INPUT' || tagName === 'TEXTAREA') && !target.readOnly) {
+    flag = false;
+  }
+
+  return flag;
 } // 判断摁下的键是否为某个键，返回true或者false
 
 

dist/hotkeys.esm.js

@@ -157,13 +157,19 @@ function getScope() {
 function getPressedKeyCodes() {
   return _downKeys.slice(0);
 } // 表单控件控件判断 返回 Boolean
+// hotkey is effective only when filter return true
 
 
 function filter(event) {
   var target = event.target || event.srcElement;
-  var tagName = target.tagName; // 忽略这些情况下快捷键无效
+  var tagName = target.tagName;
+  var flag = true; // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
 
-  return !(tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' || target.isContentEditable);
+  if (target.isContentEditable || tagName === 'TEXTAREA' || (tagName === 'INPUT' || tagName === 'TEXTAREA') && !target.readOnly) {
+    flag = false;
+  }
+
+  return flag;
 } // 判断摁下的键是否为某个键，返回true或者false
 
 

dist/hotkeys.js

@@ -163,13 +163,19 @@
   function getPressedKeyCodes() {
     return _downKeys.slice(0);
   } // 表单控件控件判断 返回 Boolean
+  // hotkey is effective only when filter return true
 
 
   function filter(event) {
     var target = event.target || event.srcElement;
-    var tagName = target.tagName; // 忽略这些情况下快捷键无效
+    var tagName = target.tagName;
+    var flag = true; // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
 
-    return !(tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' || target.isContentEditable);
+    if (target.isContentEditable || tagName === 'TEXTAREA' || (tagName === 'INPUT' || tagName === 'TEXTAREA') && !target.readOnly) {
+      flag = false;
+    }
+
+    return flag;
   } // 判断摁下的键是否为某个键，返回true或者false
 
 

dist/hotkeys.min.js

@@ -1,2 +1,2 @@
 /*! hotkeys-js v3.6.6 | MIT (c) 2019 kenny wong <wowohoo@qq.com> | http://jaywcjlove.github.io/hotkeys */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).hotkeys=t()}(this,function(){"use strict";var e="undefined"!=typeof navigator&&0<navigator.userAgent.toLowerCase().indexOf("firefox");function s(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on".concat(t),function(){n(window.event)})}function p(e,t){for(var n=t.slice(0,t.length-1),o=0;o<n.length;o++)n[o]=e[n[o].toLowerCase()];return n}function u(e){e||(e="");for(var t=(e=e.replace(/\s/g,"")).split(","),n=t.lastIndexOf("");0<=n;)t[n-1]+=",",t.splice(n,1),n=t.lastIndexOf("");return t}function l(e,t){for(var n=e.length<t.length?t:e,o=e.length<t.length?e:t,r=!0,i=0;i<n.length;i++)~o.indexOf(n[i])||(r=!1);return r}for(var t={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,"\u21ea":20,",":188,".":190,"/":191,"`":192,"-":e?173:189,"=":e?61:187,";":e?59:186,"'":222,"[":219,"]":221,"\\":220},d={"\u21e7":16,shift:16,"\u2325":18,alt:18,option:18,"\u2303":17,ctrl:17,control:17,"\u2318":e?224:91,cmd:e?224:91,command:e?224:91},y=[],h={16:"shiftKey",18:"altKey",17:"ctrlKey"},v={16:!1,18:!1,17:!1},g={},n=1;n<20;n++)t["f".concat(n)]=111+n;v[e?224:91]=!(h[e?224:91]="metaKey");var o="all",w=[],k=function(e){return t[e.toLowerCase()]||d[e.toLowerCase()]||e.toUpperCase().charCodeAt(0)};function i(e){o=e||"all"}function m(){return o||"all"}function O(e,t,n){var o;if(t.scope===n||"all"===t.scope){for(var r in o=0<t.mods.length,v)Object.prototype.hasOwnProperty.call(v,r)&&(!v[r]&&-1<t.mods.indexOf(+r)||v[r]&&!~t.mods.indexOf(+r))&&(o=!1);(0!==t.mods.length||v[16]||v[18]||v[17]||v[91])&&!o&&"*"!==t.shortcut||!1===t.method(e,t)&&(e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation&&e.stopPropagation(),e.cancelBubble&&(e.cancelBubble=!0))}}function b(e){var t=g["*"],n=e.keyCode||e.which||e.charCode;if(~y.indexOf(n)||229===n||y.push(n),93!==n&&224!==n||(n=91),n in v){for(var o in v[n]=!0,d)d[o]===n&&(C[o]=!0);if(!t)return}for(var r in v)Object.prototype.hasOwnProperty.call(v,r)&&(v[r]=e[h[r]]);if(C.filter.call(this,e)){var i=m();if(t)for(var a=0;a<t.length;a++)t[a].scope===i&&("keydown"===e.type&&!t[a].keyup||"keyup"===e.type&&t[a].keyup)&&O(e,t[a],i);if(n in g)for(var c=0;c<g[n].length;c++)if(("keydown"===e.type&&g[n][c].keydown||"keyup"===e.type&&g[n][c].keyup)&&g[n][c].key){for(var f=g[n][c].key.split("+"),l=[],s=0;s<f.length;s++)l.push(k(f[s]));(l=l.sort()).join("")===y.sort().join("")&&O(e,g[n][c],i)}}}function C(e,t,n){var o=u(e),r=[],i="all",a=document,c=0,f=!1,l=!0;for(void 0===n&&"function"==typeof t&&(n=t),"[object Object]"===Object.prototype.toString.call(t)&&(t.scope&&(i=t.scope),t.element&&(a=t.element),t.keyup&&(f=t.keyup),t.keydown&&(l=t.keydown)),"string"==typeof t&&(i=t);c<o.length;c++)r=[],1<(e=o[c].split("+")).length&&(r=p(d,e)),(e="*"===(e=e[e.length-1])?"*":k(e))in g||(g[e]=[]),g[e].push({keyup:f,keydown:l,scope:i,mods:r,shortcut:o[c],method:n,key:o[c]});void 0===a||function(e){return-1<w.indexOf(e)}(a)||(w.push(a),s(a,"keydown",function(e){b(e)}),s(a,"keyup",function(e){b(e),function(e){var t=e.keyCode||e.which||e.charCode,n=y.indexOf(t);if(n<0||y.splice(n,1),e.key&&"meta"==e.key.toLowerCase()&&y.splice(0,y.length),93!==t&&224!==t||(t=91),t in v)for(var o in v[t]=!1,d)d[o]===t&&(C[o]=!1)}(e)}))}var r={setScope:i,getScope:m,deleteScope:function(e,t){var n,o;for(var r in e||(e=m()),g)if(Object.prototype.hasOwnProperty.call(g,r))for(n=g[r],o=0;o<n.length;)n[o].scope===e?n.splice(o,1):o++;m()===e&&i(t||"all")},getPressedKeyCodes:function(){return y.slice(0)},isPressed:function(e){return"string"==typeof e&&(e=k(e)),!!~y.indexOf(e)},filter:function(e){var t=e.target||e.srcElement,n=t.tagName;return!("INPUT"===n||"SELECT"===n||"TEXTAREA"===n||t.isContentEditable)},unbind:function(e,t,n){var o,r,i=u(e),a=[];"function"==typeof t&&(n=t,t="all");for(var c=0;c<i.length;c++){if(1<(o=i[c].split("+")).length&&(a=p(d,o)),e="*"===(e=o[o.length-1])?"*":k(e),t||(t=m()),!g[e])return;for(var f=0;f<g[e].length;f++)r=g[e][f],n&&r.method!==n||r.scope!==t||!l(r.mods,a)||(g[e][f]={})}}};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(C[a]=r[a]);if("undefined"!=typeof window){var c=window.hotkeys;C.noConflict=function(e){return e&&window.hotkeys===C&&(window.hotkeys=c),C},window.hotkeys=C}return C});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).hotkeys=t()}(this,function(){"use strict";var e="undefined"!=typeof navigator&&0<navigator.userAgent.toLowerCase().indexOf("firefox");function s(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent&&e.attachEvent("on".concat(t),function(){n(window.event)})}function p(e,t){for(var n=t.slice(0,t.length-1),o=0;o<n.length;o++)n[o]=e[n[o].toLowerCase()];return n}function u(e){e||(e="");for(var t=(e=e.replace(/\s/g,"")).split(","),n=t.lastIndexOf("");0<=n;)t[n-1]+=",",t.splice(n,1),n=t.lastIndexOf("");return t}function l(e,t){for(var n=e.length<t.length?t:e,o=e.length<t.length?e:t,r=!0,i=0;i<n.length;i++)~o.indexOf(n[i])||(r=!1);return r}for(var t={backspace:8,tab:9,clear:12,enter:13,return:13,esc:27,escape:27,space:32,left:37,up:38,right:39,down:40,del:46,delete:46,ins:45,insert:45,home:36,end:35,pageup:33,pagedown:34,capslock:20,"\u21ea":20,",":188,".":190,"/":191,"`":192,"-":e?173:189,"=":e?61:187,";":e?59:186,"'":222,"[":219,"]":221,"\\":220},d={"\u21e7":16,shift:16,"\u2325":18,alt:18,option:18,"\u2303":17,ctrl:17,control:17,"\u2318":e?224:91,cmd:e?224:91,command:e?224:91},y=[],h={16:"shiftKey",18:"altKey",17:"ctrlKey"},v={16:!1,18:!1,17:!1},g={},n=1;n<20;n++)t["f".concat(n)]=111+n;v[e?224:91]=!(h[e?224:91]="metaKey");var o="all",w=[],k=function(e){return t[e.toLowerCase()]||d[e.toLowerCase()]||e.toUpperCase().charCodeAt(0)};function i(e){o=e||"all"}function m(){return o||"all"}function O(e,t,n){var o;if(t.scope===n||"all"===t.scope){for(var r in o=0<t.mods.length,v)Object.prototype.hasOwnProperty.call(v,r)&&(!v[r]&&-1<t.mods.indexOf(+r)||v[r]&&!~t.mods.indexOf(+r))&&(o=!1);(0!==t.mods.length||v[16]||v[18]||v[17]||v[91])&&!o&&"*"!==t.shortcut||!1===t.method(e,t)&&(e.preventDefault?e.preventDefault():e.returnValue=!1,e.stopPropagation&&e.stopPropagation(),e.cancelBubble&&(e.cancelBubble=!0))}}function b(e){var t=g["*"],n=e.keyCode||e.which||e.charCode;if(~y.indexOf(n)||229===n||y.push(n),93!==n&&224!==n||(n=91),n in v){for(var o in v[n]=!0,d)d[o]===n&&(C[o]=!0);if(!t)return}for(var r in v)Object.prototype.hasOwnProperty.call(v,r)&&(v[r]=e[h[r]]);if(C.filter.call(this,e)){var i=m();if(t)for(var a=0;a<t.length;a++)t[a].scope===i&&("keydown"===e.type&&!t[a].keyup||"keyup"===e.type&&t[a].keyup)&&O(e,t[a],i);if(n in g)for(var c=0;c<g[n].length;c++)if(("keydown"===e.type&&g[n][c].keydown||"keyup"===e.type&&g[n][c].keyup)&&g[n][c].key){for(var f=g[n][c].key.split("+"),l=[],s=0;s<f.length;s++)l.push(k(f[s]));(l=l.sort()).join("")===y.sort().join("")&&O(e,g[n][c],i)}}}function C(e,t,n){var o=u(e),r=[],i="all",a=document,c=0,f=!1,l=!0;for(void 0===n&&"function"==typeof t&&(n=t),"[object Object]"===Object.prototype.toString.call(t)&&(t.scope&&(i=t.scope),t.element&&(a=t.element),t.keyup&&(f=t.keyup),t.keydown&&(l=t.keydown)),"string"==typeof t&&(i=t);c<o.length;c++)r=[],1<(e=o[c].split("+")).length&&(r=p(d,e)),(e="*"===(e=e[e.length-1])?"*":k(e))in g||(g[e]=[]),g[e].push({keyup:f,keydown:l,scope:i,mods:r,shortcut:o[c],method:n,key:o[c]});void 0===a||function(e){return-1<w.indexOf(e)}(a)||(w.push(a),s(a,"keydown",function(e){b(e)}),s(a,"keyup",function(e){b(e),function(e){var t=e.keyCode||e.which||e.charCode,n=y.indexOf(t);if(n<0||y.splice(n,1),e.key&&"meta"==e.key.toLowerCase()&&y.splice(0,y.length),93!==t&&224!==t||(t=91),t in v)for(var o in v[t]=!1,d)d[o]===t&&(C[o]=!1)}(e)}))}var r={setScope:i,getScope:m,deleteScope:function(e,t){var n,o;for(var r in e||(e=m()),g)if(Object.prototype.hasOwnProperty.call(g,r))for(n=g[r],o=0;o<n.length;)n[o].scope===e?n.splice(o,1):o++;m()===e&&i(t||"all")},getPressedKeyCodes:function(){return y.slice(0)},isPressed:function(e){return"string"==typeof e&&(e=k(e)),!!~y.indexOf(e)},filter:function(e){var t=e.target||e.srcElement,n=t.tagName,o=!0;return!t.isContentEditable&&"TEXTAREA"!==n&&("INPUT"!==n&&"TEXTAREA"!==n||t.readOnly)||(o=!1),o},unbind:function(e,t,n){var o,r,i=u(e),a=[];"function"==typeof t&&(n=t,t="all");for(var c=0;c<i.length;c++){if(1<(o=i[c].split("+")).length&&(a=p(d,o)),e="*"===(e=o[o.length-1])?"*":k(e),t||(t=m()),!g[e])return;for(var f=0;f<g[e].length;f++)r=g[e][f],n&&r.method!==n||r.scope!==t||!l(r.mods,a)||(g[e][f]={})}}};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(C[a]=r[a]);if("undefined"!=typeof window){var c=window.hotkeys;C.noConflict=function(e){return e&&window.hotkeys===C&&(window.hotkeys=c),C},window.hotkeys=C}return C});

src/main.js

@@ -16,11 +16,20 @@ function getScope() { return _scope || 'all'; }
 function getPressedKeyCodes() { return _downKeys.slice(0); }
 
 // 表单控件控件判断 返回 Boolean
+// hotkey is effective only when filter return true
 function filter(event) {
   const target = event.target || event.srcElement;
   const { tagName } = target;
-  // 忽略这些情况下快捷键无效
+  let flag = true;
-  return !(tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' || target.isContentEditable);
+  // ignore: isContentEditable === 'true', <input> and <textarea> when readOnly state is false, <select>
+  if (
+    target.isContentEditable ||
+    tagName === 'TEXTAREA' ||
+    ((tagName === 'INPUT' || tagName === 'TEXTAREA') && !target.readOnly)
+  ) {
+    flag = false;
+  }
+  return flag;
 }
 
 // 判断摁下的键是否为某个键，返回true或者false

test/run.test.js

@@ -548,6 +548,20 @@ describe('\n   Hotkeys.js Test Case.\n', () => {
     await __triggerKeyboardEvent(document.body, 65);
   });
 
+  test('Event trigger on readOnly input', async () => {
+    const input = document.createElement('input')
+    input.setAttribute('readOnly', true)
+    await hotkeys('*', () => {
+      expect(hotkeys.filter.call(null, event)).toBeTruthy()
+    })
+    await __triggerKeyboardEvent(input, 65);
+    await hotkeys.unbind('*')
+    input.removeAttribute('readOnly')
+    await hotkeys('*', () => {
+      expect(hotkeys.filter.call(null, event)).toBeFalsy()
+    })
+  })
+
   afterAll(async () => {
     await browser.close();
   });