Javascript HTML5捕獲keyCode並寫入畫布

我在寫一個應用程序，我需要模擬一個textarea。我知道如何處理它的唯一方法是在關鍵事件中捕獲keyCode。怎麼會採取這個keyCode，並支持utf-8，將其應用於畫布？Javascript HTML5捕獲keyCode並寫入畫布

乾杯

2010-09-16 Russell Jones

這似乎是一個糟糕的主意，因爲在文本輸入方面有一個可怕的地方，textarea給你免費的（插入，選擇，剪切，粘貼，拖放和箭頭鍵處理等），但是這裏就是你需要做兩件事情：

給你一個<canvas>屬性tabindex，以便它可以接收焦點，從而提高關鍵事件;
向<canvas>元素添加keypress（而不是）處理程序以捕獲文本輸入。

代碼：

<canvas id="textarea" tabindex="1" width="300" height="200"></canvas> 

<script type="text/javascript"> 
    var el = document.getElementById("textarea"); 
    el.onkeypress = function(evt) { 
     var charCode = evt.which; 
     var charStr = String.fromCharCode(charCode); 
     alert(charStr); 
    }; 
</script>

來源

2010-09-16 17:22:50

我認爲你可能是對的，複製一個textarea似乎是一項可怕的工作，而我實際上並沒有看到保留textarea的任何優點（它不是一個真正的應用程序，而更像是一個寓教於樂的遊戲，發生在一個畫布元素中，但需要接收文本輸入）。我*想*把透明textarea放在我的畫布上是最好的解決方案。 – 2010-09-16 18:29:25

雖然按鍵捕捉字符代碼，但它不會捕捉退格。爲什麼使用keypress而不是keydown？ – 2014-08-21 22:19:18

@DavidR .:我會使用'keydown'作爲退格並刪除支持。但是，爲了收集文本輸入，'keypress'是唯一的關鍵事件，它爲您提供有關輸入字符的數據，因此是唯一的選擇。見http://unixpapa.com/js/key.html – 2014-08-21 22:35:48

你見過Bespin？它不僅僅是一個textarea替代品，它基本上是你想要的。您當然可以查看代碼和文檔，或者如果它符合您的需求，請使用它。

來源

2010-09-16 17:20:42

你怎麼知道他們想要什麼？你是一個心靈讀者嗎？ – strager 2010-09-16 17:36:57

我會換個話題 - 它完成了他們詢問的具體要求：「Javascript HTML5捕獲keyCode並寫入畫布」作爲純粹的基於畫布的文本編輯器，他們捕獲鍵入的鍵並使用畫布顯示 - 除此之外。 – 2010-09-16 19:04:58

使用jQuery：

<div id="myTextArea></div> 

$('#myTextArea').keypress(function (event) { 

    $('#myTextArea').append(String.fromCharCode(event.which)); 

});

來源

2010-09-16 17:26:36 Rohrbs

Javascript HTML5捕獲keyCode並寫入畫布

回答

相關問題