Захват событий мыши в скрытой / скрытой текстовой области - PullRequest
Новая
       10

Захват событий мыши в скрытой / скрытой текстовой области

0 голосов
/ 23 марта 2011

Я хочу круглую текстовую область на холсте, поэтому я помещаю текстовую область позади холста следующим образом: 

<textarea cols="40" rows="20" name="textArea" id="textArea">
    Inside
</textarea>

, а затем использую более или менее следующий код для создания «дыры».на холсте, чтобы можно было увидеть текст 

ctx.fillStyle = '#000';
ctx.fillRect(0,0,500,500);
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(250,250,250-5, 0, Math.PI*2, true);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.closePath();

И, если кто-то найдет это полезным, вот код CSS, который я использую 

canvas {
    border: 0px solid yellow;
    left: 0px;
    top: 0px;
    position: absolute;
}
textArea {
    border: 0px solid yellow;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: -1; 
    color: orange; 
    background-color: blue; 
    border-width: 0px; 
    text-align: center; 
    font-size: x-large
}

Затем я, очевидно, изменяю отступпоэтому текст кажется круглым.Все работает, за исключением того, что текстовая область не захватывает какие-либо события (щелчок мышью, движение, нажатие клавиши ...), что понятно.Мой вопрос: как мне включить эти события?

1 Ответ

0 голосов
/ 23 марта 2011

Я бы сказал, что у вас canvas выше textarea, и в этом случае события регистрируются canvas.

. Вы можете отправить их на textarea вручную, ноэто будет проблематично.Некоторым будет легче, однако ... 

document.getElementById('my-canvas').click = function() {
    document.getElementById('textaArea').focus();
}
...