HTML/Javascript:将键盘笔划输出到 URL 参数

HTML/Javascript: Outputting keyboard strokes to URL Parameters

本文关键字：输出 URL 参数 键盘 Javascript HTML      更新时间：2023-09-26

我将首先解释我的总体目标，然后是问题本身。

总体目标：

将命令发送到连接到路由器的 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的参数中。

但是，我不知道如何将键代码的值输出到对象，然后提交页面以实时将值复制到 URL 参数。

实时：例如，我的意思是在按"向上"时继续发送命令，并在释放时停止。

我能够通过在文本框中键入一个字母并使用提交按钮在 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是服务器。发生这种情况的任何事情，我都会进行编辑。

首先替换

你的跨度：

<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>

(这将生成一个看起来像：脚本网址？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 参数。

相关文章：