お世話になっております。
Monaca上でElectronを実行しようと思い、「Electron 最小限のテンプレート」からテンプレートを作成しました。
その後、フォームにテキストボックスとボタンを追加して、ボタンを押すとalertが出るようにコーディングしたところ、alertを出す前はテキストボックスに入力出来たのですが、alertを表示するとテキストボックスに入力が出来なくなってしまいます。
ちなみに、入力が出来ない状態でマウスをElectronのフォームの外に当て、再度テキストボックスを入力しようとすると正常に入力が出来ます。
おそらくですが、テキストボックスにフォーカスが当たらない状態になっていると思いますが、それ以上は分かりませんでした。
なお、コードは下記のようになります。
HTML
1index.html 2 3<!DOCTYPE HTML> 4<html> 5<head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 8 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 9 <link rel="stylesheet" href="components/loader.css"> 10 <link rel="stylesheet" href="css/style.css"> 11 <script type="text/javascript" src="js/app.js"></script> 12 <title>Electron Minimum Template</title> 13</head> 14<body> 15 <br /> 16 This is a template for Electron app. 17 <input type="text"></input> 18 <button class="alertbutton" onclick="alert_Click()">アラート</button> 19 <br /> 20 <p id="device-info"></p> 21 <script type="text/javascript" src="components/loader.js"></script> 22 <script type="text/javascript" src="js/index.js"></script> 23</body> 24</html> 25
javascript
1app.js 2 3function alert_Click() { 4 alert('OK'); 5}
「Electron 最小限のテンプレート」と同じですが、「index.js」を追加しました。
「loader.js」は行数制限に引っかかったため、載せる事が出来ませんでした。
javascript
1index.js 2 3var app = { 4 initialize: function() { 5 document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); 6 }, 7 8 onDeviceReady: function() { 9 console.log('device ready'); 10 this.getDeviceUUID(); 11 }, 12 13 getDeviceUUIDForElectronPlatform: function() { 14 try { 15 const machineIdSync = require('node-machine-id').machineIdSync; 16 return machineIdSync({original: true}); 17 } catch (error) { 18 console.error(error); 19 return 'Could not get machine id'; 20 } 21 }, 22 23 getDeviceUUID: function() { 24 const platformId = window.cordova.platformId; 25 const deviceInfo = document.getElementById('device-info'); 26 let uuid = null; 27 if (platformId.includes('electron')) { 28 // get uuid from npm package for electron platform 29 uuid = this.getDeviceUUIDForElectronPlatform(); 30 } else if (device && device.uuid && ['ios', 'android'].indexOf(platformId) >= 0) { 31 // get uuid from cordova-plugin-device 32 uuid = device.uuid; 33 } else { 34 // other platforms such as browser, ... 35 uuid = `The ${platformId} platform is not supported.`; 36 } 37 if (uuid) deviceInfo.innerHTML = `Device UUID: ${uuid}`; 38 } 39}; 40 41app.initialize();
変更したのは上記のみで後は「Electron 最小限のテンプレート」のままとなっております。
もし何かおかしい部分があれば、ご指摘いただけると助かります。
以上、よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー