🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

5408閲覧

Electronで<input type="text">が入力出来なくなってしまう

T_Furuta

総合スコア25

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2021/02/15 04:00

編集2021/02/15 04:23

お世話になっております。
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 最小限のテンプレート」のままとなっております。
もし何かおかしい部分があれば、ご指摘いただけると助かります。
以上、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/15 04:11

jsコードをすべて提示してください。
T_Furuta

2021/02/15 04:24

すみませんでした。 ご指摘通り残りの「index.js」は追加しました。 ただ、「loader.js」は行数制限に引っかかったため、載せる事が出来ませんでした。
guest

回答1

0

ベストアンサー

Electron自体の不具合のようです。
下のissueが該当のものかと思われます。
https://github.com/electron/electron/issues/19977

CordovaのElectronバージョンは、10系を利用しているため、
この問題が発生するようです。

https://github.com/apache/cordova-electron/blob/2.0.0/package.json#L24

投稿2021/02/16 10:33

tkk44

総合スコア59

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

T_Furuta

2021/02/17 00:16

tkk44様 情報ありがとうございます。 issue拝見させていただきました。(英語は読めないもので、Google翻訳をかけました) 確かにこの現象で間違いなさそうです。 英語で検索をかけて、回避方法や別の方法が無いか探してみます。 どうもありがとうございました。
sgry7112

2022/07/24 15:28

T_Furuta様 本件に関しまして、対処方法見つかりましたでしょうか? 同じ現象で行き詰っており、この質問にたどり着きました。 その後、回避方法があったようでしたら、ご教示お願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問