Question

我有emscripten编译的c ++代码（使用openGL）在我的网页（转换为WebGL）中运行并呈现图像。一切都很好，除了当我在网页上输入textarea时，Emscripten编译的Javascript阻止我使用“删除”“退格”“标签”键。请注意，所有字母键和“空格”都可以正常工作。

作为参考，我在JavaScript代码中实例化的模块几乎与默认模块完全相同：

var Module = {
preRun: [],

postRun: [],

print: (function() {
    var element = document.getElementById('emscriptenOutput');
    if (element) element.value = ''; // clear browser cache
        return function(text) {
    if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
        // These replacements are necessary if you render to raw HTML
        //text = text.replace(/&/g, "&");
        //text = text.replace(/</g, "<");
        //text = text.replace(/>/g, ">");
        //text = text.replace('\n', '<br>', 'g');
        console.log(text);
        if (element) {
            element.value += text + "\n";
            element.scrollTop = element.scrollHeight; // focus on bottom
        }
    };
})(),

printErr: function(text) {
    if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
        if (0) { // XXX disabled for safety typeof dump == 'function') {
            dump(text + '\n'); // fast, straight to the real console
        } else {
            console.error(text);
    }
},

canvas: (function() {
    var canvas = document.getElementById('canvas');

    // As a default initial behavior, pop up an alert when webgl context is lost. To make your
    // application robust, you may want to override this behavior before shipping!
    // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
    canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
    return canvas;
})(),

totalDependencies: 0,

    //doNotCaptureKeyboard: true,

    monitorRunDependencies: function(left) {
        this.totalDependencies = Math.max(this.totalDependencies, left);
        // Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
    }
};

    (function() {
        var memoryInitializer = 'renderer.js.mem';
        if (typeof Module['locateFile'] === 'function') {
            memoryInitializer = Module['locateFile'](memoryInitializer);
        } else if (Module['memoryInitializerPrefixURL']) {
            memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
        }
        var meminitXHR = Module['memoryInitializerRequest'] = new XMLHttpRequest();
        meminitXHR.open('GET', memoryInitializer, true);
        meminitXHR.responseType = 'arraybuffer';
        meminitXHR.send(null);
    })();

    var script = document.createElement('script');
    script.src = "renderer.js";
    document.body.appendChild(script);

当然，emscripten编译的JavaScript对人眼来说是胡言乱语，但罪魁祸首很可能就在那里。

我的猜测是WebGL上下文正在吃键盘事件，但我不确定。我查看了这些链接，并尝试将“doNotCaptureKeyboard：true”包含在模块元素中，但没有成功。

https://forum.unity.com/threads/disable-enable-keyboard-in-runtime-webgl.286557/#post-1892527 https://github.com/kripken/emscripten/issues/2668#event-154218404

任何人都有同样问题的经验吗？我很茫然。

Answer 1

对于那些好奇的人，我有一个解决方案，但不确定它是否是最好的。我刚刚添加了自己的事件监听器来阻止编译的JavaScript代码的事件监听器：

/* code to prevent emscripten compiled code from eating key input */
window.addEventListener('keydown', function(event){
    event.stopImmediatePropagation();
}, true);

window.addEventListener('keyup', function(event){
    event.stopImmediatePropagation();
}, true);

Answer 2

内部脚本 src / library_glfw.js （在第400行左右，里程可能因您的版本而异），有一个非常奇怪的检查，如下所示：

      // This logic comes directly from the sdl implementation. We cannot
      // call preventDefault on all keydown events otherwise onKeyPress will
      // not get called
      if (event.keyCode === 8 /* backspace */ || event.keyCode === 9 /* tab */) {
        event.preventDefault();
      }

现在，如果您注释掉这些行，那些事件将被正确传播，我不确定为什么他们会将SDL特例放在通用代码路径中。

PS：如果他们解决了某些问题，则该答案可能会过时。代码，因此，如果您从将来开始阅读，只需将其用作过去参考。

防止Emscripten编译的JavaScript阻止某些键输入

2 个答案: