捕捉鼠標事件

我希望有一個圓形的文本區域在畫布等什麼我做的是將文本區域畫布後面，像這樣捕捉鼠標事件

<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();

而且，如果任何人發現它是有用的，這裏是我使用

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 
}

CSS代碼0

然後，我明顯改變了填充，所以文本看起來是圓形的。一切正常，除了文本區域沒有捕獲任何事件（鼠標點擊，動作，按鍵......），這是可以理解的。我的問題是如何打開這些事件。

來源

2011-03-23 puk

'textArea'應該只是'textarea'，除非你意味着是一個'id'選擇，在這種情況下釘一個''＃前綴，把它作爲是。 – alex 2011-03-23 04:55:38

對不起，這是一個'id'選擇器。是需要'＃'還是隻是一個更好的命名約定？ – puk 2011-03-23 05:03:50

@puk如果您使用'id'選擇器，'＃'是必需的。 – alex 2011-03-23 05:15:03

我想說你有canvas高於textarea，在這種情況下，事件被canvas捕獲。

您可以手動將它們發送到textarea，但這會產生問題。有些人會更容易，但是...

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

來源

2011-03-23 04:56:20 alex

我不知道爲什麼我沒有想到這一點。我將手動管理這些內容，檢查用戶在圈內的時間以及他/她在圈外的時間。 – puk 2011-03-23 05:05:03

嗯，我只是嘗試了這一點，不僅關注焦點，還關鍵，並且它似乎不起作用。還有其他建議嗎？ – puk 2011-03-23 05:13:19

捕捉鼠標事件

回答

相關問題