HTML/Javascript：將鍵盤筆劃輸出到URL參數

我會先解釋我的總體目標，然後解釋問題本身。HTML/Javascript：將鍵盤筆劃輸出到URL參數

總體目標：

將命令發送到被連接到一個路由器的Arduino板。一臺電腦將通過wifi連接到路由器。 Arduino將提供本地網站，計算機將使用該網站向Arduino發送按鍵。根據按鍵，Arduino會以某種方式表現出來。

將命令發送到Arduino的一種方法是使用Arduino服務的網站URL末尾的參數。 Arduino可以讀取這些參數。我對此沒有任何問題。

的Arduino是能夠服務的網站編碼的JavaScript/HTML/CSS等。

問：

我一直在Javascript一週;但到目前爲止，我有下面的代碼：

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 


function Submit() 
{ 
document.forms['myform'].submit(); 
} 

document.onkeydown = function(event) { 
var key_press = String.fromCharCode(event.keyCode); 
var key_code = event.keyCode; 
document.getElementById('kp').innerHTML = key_press; 
    document.getElementById('kc').innerHTML = key_code; 
var t=setTimeout("Submit()", 500);   
} 


</script> 
</head> 


<form name='myform' method='GET'> 

Key Pressed : <span id="kp" name="KP"></span> 
<br /> 
Key Code : <span id="kc" name="KC"></span> 


</form> 
</html>

有了這個，我能看到我砸鍵盤的按鍵的「鍵碼」。網站會看到按鍵，輸出關鍵代碼和實際關鍵。

我把設置的超時功能放在那裏，所以頁面刷新速度較慢，恆定的速度，而我拿着一把鑰匙。

我知道HTML中的一些東西會自己創建和管理這些參數。例如，下拉框。從我的理解，在下拉框中被放入

<form method='GET'></form>

標籤，您可以創建參數。文本框也會做同樣的事情。然後，如果某人'提交'網頁，則這些對象中的調整值將顯示在URL的參數中。

但是，我無法弄清楚如何將鍵代碼的值輸出到對象，然後提交頁面以在REAL時間將值複製到URL參數。

通過實時：我的意思是當我按下'up'時繼續發送命令，並在我釋放時停止。

我能夠通過在文本框中輸入一個字母，並使用提交按鈕將值輸入到URL參數中來完成此操作的粗略版本。但是，我不能在此包含向上或向下箭頭，並且我希望網頁能夠實時自行提交。

TLDR：如何使用鍵盤上的按鍵代碼實時控制URL中的參數？

非常感謝您閱讀本文。所有的反應非常感謝。

編輯5/15/12 web_bod給了我一些有用的代碼。以下是新代碼的完整內容：

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 


function Submit() 
{ 
document.forms['myform'].submit(); 
} 

document.onkeydown = function(event) { 
var key_press = String.fromCharCode(event.keyCode); 
var key_code = event.keyCode; 
document.getElementById('kp').innerHTML = key_press; 

var t=setTimeout("Submit()", 500);   
} 

</script> 
</head> 

<body onLoad='document.myform.KP.focus()'> 
<form name='myform' method='GET' action="ENTER URL HERE"> 
Key Pressed : <input type="text" id="kp" name="KP"></span> 

</form> 
</body> 
</html>

我將網頁焦點放在文本框上。沒有它，我不得不點擊文本框，然後代碼將最終註冊。

這樣做的表現如下：當網頁加載時，頁面將自動關注文本框。它等待重點新聞。按下一個鍵：頁面將在半秒鐘後將該字母加載到URL的參數中（您可以使用setTimeout（）更快地響應）。該鍵將保持在參數中，直到按下另一個鍵。

我知道乞丐不能選擇器，但是我希望它能夠執行「視頻遊戲風格」，在這種情況下，只要按下一個按鍵，動作就會在我釋放按鍵時停止。在這種情況下，如果按住一個鍵，文本框將填充字母，然後提交。這是行不通的，因爲我希望Arduino能夠查找單個字符，而不是字符列表。然而，迄今爲止這確實很棒。我當然不介意實施這個。

然而，我一直在做與Tim提到的套接字通信的大量研究。這似乎是一個很好的途徑，Arduino Ethernet Shield使用UDP庫，到目前爲止，我唯一的困難是設置客戶端。 Arduino是服務器。任何與此有關的事情都會發生，我會進行編輯。

來源

2012-05-09 Nick Williams

那麼提交頁面會有添加事件處理程序和監聽的問題。你可能想用Ajax，image src或iframe進行調用。 – epascarello

試圖用urls來設置你的命令不是實現你想要實現的通信的最簡單的方法，我不這麼認爲。如果您的arduino連接到路由器而不是爲網頁提供服務，則創建一個可用於arduino和計算機之間通信的套接字可能會更容易。這將是一種簡單得多的方式來發送您需要的信號，以實現您想要的實時反饋。 – FoamyGuy

謝謝epascarello和蒂姆，你的反應非常感謝。我對Ajax，圖像src，iframe和套接字通信知之甚少。所以幾天後，我會做很多研究。當然，如果我通過你的主題找到一個可行的解決方案，我一定會編輯併發布我所做的。 –

首先替換您的跨度：

<form name='myform' method='GET' action="scriptURL"> 
    Key Pressed : <input type="text" id="kp" name="KP"></span> 
    <br /> 
    Key Code : <input type="text" id="kc" name="KC"></span> 
</form>

（將生成一個URL看起來像：在scriptUrl KP = XXX & KC = YYY）

如果你想要的東西的重量真的很輕，那麼如何大約：

<script>  
    document.onkeydown = function(event) { 
    var key_press = String.fromCharCode(event.keyCode); 
    var key_code = event.keyCode; 
    document.getElementById('img').src = "scriptURL?KP=" + key_press + "&KC=" + key_code; 
    } 
</script> 

<img src="scriptURL" id="img" style="display:none;"/>

無論數據如何，每個按鍵都會觸發圖像的重新加載（它是隱藏的）在您的服務器上返回的腳本將實時接收KP和KC參數。

來源

2012-05-15 03:03:05

這很不錯！我將編輯一些涉及您提供的代碼。一旦我按下一個鍵，它就會在參數中註冊。我做了一些小的改變。 –

HTML/Javascript：將鍵盤筆劃輸出到URL參數

回答

相關問題