브라우저에서 <canvas>을 자동으로 선택 하시겠습니까?

현재 캔버스에서 몇 가지 문제가 있습니다. Processing.js 스케치를로드 할 때 사용자는 캔버스를 선택하기 위해 한 번 클릭해야합니다. 페이지로드시 자동 선택을위한 대안이 있습니까? 나는 오토 포커스를보고 있었지만 크로스 브라우저 구현을 지원하는 픽스가 필요했다. 모든 조언을 크게 주시면 감사하겠습니다.브라우저에서 <canvas>을 자동으로 선택 하시겠습니까?

많은 감사 !!!

업데이트 !!! 예 : 실행중인 코드 ... (공백 설정과 공백을 남겨 둡니다.)

<!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를 할당되지 않은 기본적으로

Error screenshot

출처

2014-07-08 owlwink

스케치를 어떻게로드하는지 보여줄 수 있습니까? 코드는 우리가 귀하의 질문에 대답하는 데 도움이 – jasonscript

@jasonscript 내가 실행중인 코드의 예를 추가했습니다, 어떤 도움을 주시면 감사하겠습니다 ... :-) – owlwink

. 따라서 포커스를받을 수 없습니다.

포커스를 얻으려면 캔버스에 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();

출처

2014-07-08 04:00:28 markE

안녕하세요 markE이 옵션을 시도하고 그것은 나를 위해 작동하지 않습니다. 내 질문을 코드 샘플로 업데이트하여 모든 것이 명확 해졌습니다. 당신의 도움이 인정됩니다 :-) – owlwink

값을 null로 설정할 수 없다는 canvas.setAttribute에 대해 말하고 있습니다 ... – owlwink

코드를 게시 했으므로 다음과 같이 캔버스 참조를 얻으십시오 :'var canvas = document.getElementById ('myCanvas'); ' – markE

canvas 요소가 페이지에 추가되기 전에 스크립트가 실행되고 있다고 생각합니다. jQuery를 사용하고 있으므로 document.ready() 함수로 묶을 수 있습니다.

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

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

출처

2014-07-08 08:29:22 jasonscript

문서를 준비 할 때 캔버스 ID 클릭을 추가했지만 작동시키지 못했습니다 ... – owlwink

브라우저에서 <canvas>을 자동으로 선택 하시겠습니까?

답변

관련 문제