在chrome个应用中输入提交

Question

我创建了一个小应用程序，它应该在按下输入键时执行一个操作。当我在浏览器中打开 html 时，它按我想要的方式工作，但是当我将它作为 chrome 应用程序打开时，它却没有。这是 html:

<input type="text" id='command' onkeydown="keyDown()">

这里是 Javascript:

function keyDown() {
    if (event.keyCode == 13) {
        var command = document.getElementById('command');
        var value = command.value;
        if (value === "exit") {
            alert('hi');
            var mainWindow = chrome.app.window.get('firstInstall');
            mainWindow.close();
        } else {
            document.getElementyId('wrong').className = 'unhidden';
        }
    }
}

（不要介意 'else{...}' 部分）

在浏览器中，代码会按应有的方式提醒 'hi'。这就是我知道它在浏览器中工作的方式。 chrome 应用程序不工作。谁能帮忙？谢谢！

Answer 1

我假设您的 HTML 实际上在 ID 属性上有结束引号，例如

<input type="text" id='command' onkeydown="keyDown()">

（如果没有，那会给你带来其他问题）

不过，真正的问题是 Chrome 应用程序不允许 HTML 文件中的 JavaScript 文本。这既适用于内联脚本，也适用于 onkeydown 等事件属性，并且是 Chrome 应用实施的安全措施的一部分，以确保您的应用不会执行不受信任的 JavaScript.

解决这个问题的方法是有一段 JavaScript 将事件侦听器附加到 <input> 标记，如下所示：

document.getElementById('command').addEventListener('keydown', keyDown);

这会将 keyDown() 函数作为侦听器附加到 ID 为 command 的元素上的 onkeydown 事件。

您可以在此处阅读有关 addEventListener 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

有关 Chrome 应用执行的内容安全策略的更多信息，请参见此处：https://developer.chrome.com/apps/contentSecurityPolicy

Answer 2

在keyDown函数中，定义事件对象（关键字）如下：

<input type="text" id='command' onkeydown="keyDown(event)">

通过它，事件对象将作为函数中的局部变量访问：

function keyDown(event){ 
    if(event.keyCode == 13) { 
        var command =  document.getElementById('command'); 
        var value = command.value; 
        if(value === "exit"){ 
            alert('hi'); 
            var mainWindow = chrome.app.window.get('firstInstall'); 
            mainWindow.close();
        } else { 
            document.getElementById('command').className = 'unhidden'; 
        }
    }
}

在chrome个应用中输入提交

Enter to submit in chrome app

html

javascript

forms

enter

google-chrome-app