Javascript 在浏览器上自动选择？_Javascript_Html_Canvas_Html5 Canvas_Processing.js

Javascript 在浏览器上自动选择？

javascript html canvas html5-canvas

Javascript 在浏览器上自动选择？,javascript,html,canvas,html5-canvas,processing.js,Javascript,Html,Canvas,Html5 Canvas,Processing.js,我目前在画布上遇到了一些问题。加载Processing.js草图时，需要用户在画布上单击一次，以便将其选中。页面加载时是否有自动选择的解决方法。我一直在研究自动对焦，但我希望能找到一种支持跨浏览器实现的修复方法。如有任何建议，将不胜感激非常感谢更新！！！例如，我正在运行的代码。。。我已将“作废设置”和“作废绘图”留空 <!DOCTYPE html> <html> <head> <style> /* Removes focus outline

我目前在画布上遇到了一些问题。加载Processing.js草图时，需要用户在画布上单击一次，以便将其选中。页面加载时是否有自动选择的解决方法。我一直在研究自动对焦，但我希望能找到一种支持跨浏览器实现的修复方法。如有任何建议，将不胜感激

非常感谢

更新！！！例如，我正在运行的代码。。。我已将“作废设置”和“作废绘图”留空

<!DOCTYPE html>
<html>
<head>

<style>
/* Removes focus outline from canvas */
canvas:focus{outline:none;} 
</style>

<script src= "http://code.jquery.com/jquery-1.11.0.min.js">
</script> 

<!-- This is the processing canvas------------------------- -->
<script src="processing.js"></script>
<script type="text/processing" data-processing-target="myCanvas">

PShape boy;
PShape girl;

void setup(){......}
void draw(){......}

</script>
</head>
<body>
<div>
<canvas id="myCanvas"></canvas>
</div>
</body>
</html>

更新

这是我尝试markE方法时收到的错误

默认情况下，画布元素没有分配tabindex。因此，它无法获得关注：

要获得焦点，可以在画布上设置tabindex

// get a reference to the canvas
var canvas=document.getElementById('canvas');

// set canvas to be a tab stop (necessary to get events)
canvas.setAttribute('tabindex','0');

// set focus to the canvas so keystrokes are immediately handled
canvas.focus();

我认为脚本是在画布元素添加到页面之前运行的。因为您使用的是jQuery，所以可以尝试将其包装到document.ready函数中

你能展示一下你是如何加载草图的吗？代码帮助我们回答您的问题question@jasonscript我已经添加了一个我正在运行的代码示例，如有任何帮助，将不胜感激…：-你解决过这个问题吗？画布必须单击一次才能与之交互。嘿，马克，我尝试了这个选项，但它对我不起作用。我用一个代码示例更新了我的问题，这样事情就更清楚了。感谢您的帮助：-现在您已经发布了代码，您希望获得如下画布引用：var canvas=document.getElementById'myCanvas'；嘿，马克，我已经试过了，但仍然不起作用。我已经用错误截图更新了问题。我尝试过，在文档准备好时添加画布id单击，但无法使其工作。。。

$(document).ready(function(){
    PShape boy;
    PShape girl;

    void setup(){......}
    void draw(){......}
});