輸入類型「日期」不可編輯

Question

當我創建一個上下文菜單項並且上下文類型爲"editable"時，它會在<input>標記上打開上下文菜單時顯示。

chrome.contextMenus.create({ 
    ... 
    contexts: ["editable"] 
    ... 
}); 

它的工作原理，當<input>是正常的文本框，然而，當它有一個類型，如date或time，菜單不再顯示出來：

<input type="date"> <!-- Nope --> 

這是爲什麼，是有讓它出現的方式（僅適用於包含不同類型<input>的可編輯元素）？

Answer 1

根據source code只有非只讀，非禁用的文本輸入元素是"editable"。

解決方案：動態更改上下文菜單項context。

聲明一個內容腳本用於與檢查聚焦元素並從上下文菜單項的context到"page"或"editable"相應消息發送到背景腳本update鼠標/鍵盤事件處理程序的所有/指定的URL。

• manifest.json的：

  "permissions": ["contextMenus"], 
  "content_scripts": [{ 
      "matches": ["<all_urls>"], 
      "js": ["content.js"], 
      "run_at": "document_start" 
  }], 
  "background": { 
      "scripts": ["background.js"], 
      "persistent": false 
  }, 
  

• content.js：

  window.addEventListener('mousedown', toggleContextMenu); 
  window.addEventListener('keydown', toggleContextMenu); 
  
  function toggleContextMenu(e) { 
  
      if (e.button == 2 || 
       // "Apps Menu" key 
       e.keyCode == 93 && !e.altKey && !e.shiftKey && !e.ctrlKey && !e.metaKey) { 
  
       var tag = e.target.localName; 
       var type = e.target.type; 
  
       var forceMenu = 
        tag == 'input' && /^(date|time|month|color)$/.test(type) || 
        tag == 'select'; 
  
       chrome.runtime.sendMessage(forceMenu ? 'page' : 'editable'); 
      } 
  } 
  

• background.js：

  chrome.contextMenus.create({ 
      id: 'hello', 
      title: 'Hello', 
      contexts: ['editable'] 
  }, function() { 
      var ignoreErrors = chrome.runtime.lastError; 
  }); 
  
  chrome.contextMenus.onClicked.addListener(function(info, tab) { 
      if (info.menuItemId == 'hello') { 
       console.log('Hello'); 
      } 
  }); 
  
  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { 
      chrome.contextMenus.update('hello', {contexts: [msg]}); 
  });