【问题标题】:HTML Keydown even only once even when its being held it?HTML Keydown 事件即使在举行时也只有一次?
【发布时间】:2012-02-02 22:39:23
【问题描述】:

我的 HTML 文档中有一个脚本,它检测何时检测到箭头键之一,然后它会更改 iframe 的 URL。释放键时,iframe 将再次更改。

这有效,除非在按住键期间它会不断重复设置 iframe 网址的操作。

有没有办法让它在按住时只更改 iframe url 一次?然后当它发布时它会改变网址?

额外: Iv 创建了一个页面来通过网络控制遥控车。除了这个问题,它工作得很好。基本上,它将 iframe url 更改为 PHP 页面,每个箭头键都有一个不同的 get 变量。然后 PHP 页面使用 PHP Serial 根据从 iframe 发送的变量(使用 GET)将数据发送到串行端口。

感谢您的帮助!!!

编辑:这是汽车的照片。 http://oi41.tinypic.com/21cimms.jpg

编辑 2

这是 index.html

<!doctype html>
<html lang="en">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
        function pause(ms) {
           ms += new Date().getTime();
           while (new Date() < ms){}
          } 
            var keyBeingHeld = new Array();
            keyBeingHeld[0] = false;//left
            keyBeingHeld[1] = false;//right
            keyBeingHeld[2] = false;//up
            keyBeingHeld[3] = false;//down

            function setControllerState(action){
                leftPressState="up";
                rightPressState="up";
                upPressState="up";
                downPressState="up";
                if (keyBeingHeld[0]){
                    leftPressState="down";

                }
                if (keyBeingHeld[1]){
                    rightPressState="down";
                }
                if (keyBeingHeld[2]){
                    upPressState="down";
                }
                if (keyBeingHeld[3]){
                    downPressState="down";
                }
                var stateStr = "?upPressState="+upPressState+"&downPressState="+downPressState+"&leftPressState="+leftPressState+"&rightPressState="+rightPressState;
                iframe = document.getElementById('stateFrame');
                iframe.src = "BackEnd.php"+stateStr+"&action="+action;

            }

            $(document).keydown(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (!keyBeingHeld[0]){
                            keyBeingHeld[0] = true;
                            setControllerState ("leftArrowPress");
                        } 
                        break;
                    case 38: 
                        if (!keyBeingHeld[2]){
                            keyBeingHeld[2] = true;
                            setControllerState ("upArrowPress");
                        } 
                        break;
                    case 39: 
                        if (!keyBeingHeld[1]){
                            keyBeingHeld[1] = true;
                            setControllerState ("rightArrowPress");
                        } 
                        break;
                    case 40: 
                        if (!keyBeingHeld[3]){
                            keyBeingHeld[3] = true;
                            setControllerState ("downArrowPress");

                        } 
                        break;
                }
            });

            $(document).keyup(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (keyBeingHeld[0]){
                            keyBeingHeld[0] = false;
                            setControllerState ("leftArrowRelease");    
                        } 
                        break;
                    case 38: 
                        if (keyBeingHeld[2]){
                            keyBeingHeld[2] = false;
                            setControllerState ("upArrowRelease");

                        } 
                        break;
                    case 39: 
                        if (keyBeingHeld[1]){
                            keyBeingHeld[1] = false;
                            setControllerState ("rightArrowRelease");

                        } 
                        break;
                    case 40: 
                        if (keyBeingHeld[3]){
                            keyBeingHeld[3] = false;
                            setControllerState ("downArrowRelease");
                        } 
                        break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p>
       <iframe id="stateFrame" name="stateFrame" style="width:160px;height:180px;" src="BackEnd.php?upPressState=up&downPressState=up&leftPressState=up&downPressState=up&action=none"></iframe>
       <p>Thanks vdbuilder!</p>
    </body>
</html>

这是 backend.php

<?php
    $opened = false;

    $upPressState = cleanupSpecialChars($_GET['upPressState']) or $upPressState = 'up';   
    $downPressState = cleanupSpecialChars($_GET['downPressState']) or $downPressState = 'up';
    $leftPressState = cleanupSpecialChars($_GET['leftPressState']) or $leftPressState = 'up';   
    $rightPressState = cleanupSpecialChars($_GET['rightPressState']) or $rightPressState = 'up';
    $action = cleanupSpecialChars($_GET['action']) or $action = 'none';

    // build your message from states and action, and send to serial port here 

    //the rest is to display the state
    $pressedColor = "bbffbb";
    $releasedColor = "bbbbbb";

    $upArrowColor = $releasedColor;
    $downArrowColor = $releasedColor;
    $leftArrowColor = $releasedColor;
    $rightArrowColor = $releasedColor;





    if($upPressState == "down"){ 
        sendCMD(25);
        $upArrowColor = $pressedColor;
    }
    if($downPressState == "down"){
        sendCMD(24);
        $downArrowColor = $pressedColor;
    }
    if($leftPressState == "down"){
        sendCMD(28);
        $leftArrowColor = $pressedColor;
    }
    if($rightPressState == "down"){
        sendCMD(29);
        $rightArrowColor = $pressedColor;
    }
    //--- Up
     if($upPressState == "up"){ 
        sendCMD(15);
        $upArrowColor = $releasedColor; 
    }
         if($downPressState == "up"){ 
        sendCMD(14);
        $downArrowColor = $releasedColor;   
    }
         if($leftPressState == "up"){ 
         sendCMD(18);
        $leftArrowColor = $releasedColor;   
    }
         if($rightPressState == "up"){ 
         sendCMD(19);
        $rightArrowColor = $releasedColor;  
    }

    echo("<html><head><style>");
    echo("body{background-color:#000000;}
          div#container{position:absolute;left:10px;top:10px;background-color:#eeeeee;
              font-size:20px;padding:20px;width:100px;height:92px;text-align:center;}
          div.arrow{position:absolute;width:30px;padding-top:2px;padding-bottom:2px;}
          div#upArrow{left:55px;top:20px;background-color:#".$upArrowColor.";}
          div#downArrow{left:55px;top:82px;background-color:#".$downArrowColor.";}
          div#leftArrow{left:20px;top:50px;background-color:#".$leftArrowColor.";}
          div#rightArrow{left:90px;top:50px;background-color:#".$rightArrowColor.";}
          div#lastAction{position:absolute;left:0px;bottom:2px;font-size:14px;color:#ffffee;}");
    echo("</style></head><body>");
    echo("<div id='container'>
          <div class='arrow' id='upArrow'>&uarr;</div><div class='arrow' id='downArrow'>&darr;</div>
          <div class='arrow' id='leftArrow'>&larr;</div><div class='arrow' id='rightArrow'>&rarr;</div>
          </div><div id='lastAction'>Last Action:<br />".$action."</div>");
    echo("</body></html>");

//cleanup input
    function cleanupSpecialChars($inStr){
        $tempStr = htmlentities(stripslashes($inStr));
        $retStr = str_replace(array('\\','/'), '', $tempStr);
        return $retStr;
    }
    function sendCMD($cmd){
        if($opened == false){
        $fp =fopen("com4", "wb");
         } 
        fwrite($fp,$cmd);
        fclose($fp);
        }


?>

【问题讨论】:

  • 我尝试了很多。没有一个工作正常。我会尝试取回我的原始代码并将其发布。感谢您的回复。
  • 我正在使用这个。 stackoverflow.com/questions/2217553/…。然后我也为 keyup 制作了该脚本的副本。
  • 感谢您的回答。我确实发布了代码,因为我几乎没有。我真的不知道从哪里开始。
  • 我没有足够的声誉,但我将其设置为答案。
  • 不着急。我只是在这个网站上阅读了很多东西。我理解你所说的概念,但我不知道该怎么做。我会用谷歌搜索一下。

标签: javascript html keypress keydown autorepeat


【解决方案1】:

在 keydown 上设置一个标志,在 keyup 上清除它。 仅在未设置标志时触发操作。

【讨论】:

  • 我一直在尝试类似的东西。我对 html 比较陌生。你能给我举个例子吗?感谢您的回复!
  • 哈哈我去过。 Chrome javascript 控制台全是错误。我很讨厌这个。好的,谢谢,期待。
【解决方案2】:

简答:

在发送请求之前设置一个标志并测试它是否已设置。

长答案:

需要两个文件。
以下两个文件的工作方式如下:

您导航到 FrontEnd.html。它维护状态并包含一个 iframe。 iframe 使用 BackEnd.php 加载(其状态变量设置为默认值并通过 get 方法传递)。当按下或释放一个键时,FrontEnd.html 使用 BackEnd.php 重新加载 iframe(通过 get 方法传递状态)。

BackEnd.php 将消息发送到串行端口并根据从 FrontEnd.html 传递给它的变量显示箭头键的状态。

<!doctype html>
<html lang="en">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var controllerIsReady = false;
            var keyEventBuffer = new Array();
            var keyBeingHeld = new Array();
            keyBeingHeld[0] = false;//left
            keyBeingHeld[1] = false;//right
            keyBeingHeld[2] = false;//up
            keyBeingHeld[3] = false;//down

            function controllerReady(){
                controllerIsReady = false;
                if(keyEventBuffer.length > 0){
                    bufferDiv = document.getElementById('eventBuffer');
                    buffHtmlStr = " ";
                    for (i=0;i<keyEventBuffer.length;i++){
                        tempStr = keyEventBuffer[i];
                        index = tempStr.indexOf("action", 0)+7;
                        keyEventStr = tempStr.substr(index,(tempStr.length-index));
                        buffHtmlStr = buffHtmlStr + "<br />" + keyEventStr;
                    }
                    bufferDiv.innerHTML = buffHtmlStr;
                    //shift event off and make request
                    stateStr = keyEventBuffer.shift(); 
                    iframe = document.getElementById('stateFrame');
                    iframe.src = "http://www.vdstudios.net/robotics/BackEnd.php"+stateStr; 
                }
                else{
                    controllerIsReady = true;//alert("ready");
                    bufferDiv = document.getElementById('eventBuffer');
                    bufferDiv.innerHTML = "empty";
                }

            }

            function setControllerState(action){
                leftPressState="up";
                rightPressState="up";
                upPressState="up";
                downPressState="up";
                if (keyBeingHeld[0]){
                    leftPressState="down";
                }
                if (keyBeingHeld[1]){
                    rightPressState="down";
                }
                if (keyBeingHeld[2]){
                    upPressState="down";
                }
                if (keyBeingHeld[3]){
                    downPressState="down";
                }
                var stateStr = "?upPressState="+upPressState+"&downPressState="+downPressState+"&leftPressState="+leftPressState+"&rightPressState="+rightPressState+"&action="+action;

                //add stateStr to fifo and if controllerIsReady call controllerReady
                keyEventBuffer.push(stateStr);
                if(controllerIsReady){
                    controllerReady();
                }
            }

            $(document).keydown(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (!keyBeingHeld[0]){
                            keyBeingHeld[0] = true;
                            setControllerState ("leftArrowPress");
                        } 
                        break;
                    case 38: 
                        if (!keyBeingHeld[2]){
                            keyBeingHeld[2] = true;
                            setControllerState ("upArrowPress");
                        } 
                        break;
                    case 39: 
                        if (!keyBeingHeld[1]){
                            keyBeingHeld[1] = true;
                            setControllerState ("rightArrowPress");
                        } 
                        break;
                    case 40: 
                        if (!keyBeingHeld[3]){
                            keyBeingHeld[3] = true;
                            setControllerState ("downArrowPress");
                        } 
                        break;
                }
            });

            $(document).keyup(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (keyBeingHeld[0]){
                            keyBeingHeld[0] = false;
                            setControllerState ("leftArrowRelease");
                        } 
                        break;
                    case 38: 
                        if (keyBeingHeld[2]){
                            keyBeingHeld[2] = false;
                            setControllerState ("upArrowRelease");
                        } 
                        break;
                    case 39: 
                        if (keyBeingHeld[1]){
                            keyBeingHeld[1] = false;
                            setControllerState ("rightArrowRelease");
                        } 
                        break;
                    case 40: 
                        if (keyBeingHeld[3]){
                            keyBeingHeld[3] = false;
                            setControllerState ("downArrowRelease");
                        } 
                        break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p>
       <iframe id="stateFrame" name="stateFrame" style="width:160px;height:180px;" src="http://www.vdstudios.net/robotics/BackEnd.php?upPressState=up&downPressState=up&leftPressState=up&rightPressState=up&action=none"></iframe>
       <div style="width:160px;padding:2px;padding-top:5px;background-color:#cccccc;text-align:center;">Event buffer<hr /><div id="eventBuffer" style="width:100%;">text</div></div> 
    </body>
</html>

BackEnd.php

<?php
    header("Cache-Control: no-store, no-cache, must-revalidate"); 
    header("Cache-Control: post-check=0, pre-check=0", false); 
    // HTTP/1.0 
    header("Pragma: no-cache");

    $upPressState = cleanupSpecialChars($_GET['upPressState']) or $upPressState = 'up';   
    $downPressState = cleanupSpecialChars($_GET['downPressState']) or $downPressState = 'up';
    $leftPressState = cleanupSpecialChars($_GET['leftPressState']) or $leftPressState = 'up';   
    $rightPressState = cleanupSpecialChars($_GET['rightPressState']) or $rightPressState = 'up';
    $action = cleanupSpecialChars($_GET['action']) or $action = 'none';

    //send message to serial port 
    if($action == "upArrowPress"){
        sendCMD(25);
    }
    else if($action == "downArrowPress"){
        sendCMD(24);
    }
    else if($action == "leftArrowPress"){
        sendCMD(28);
    }
    else if($action == "rightArrowPress"){
        sendCMD(29);
    }
    else if($action == "upArrowRelease"){
        sendCMD(15);
    }
    else if($action == "downArrowRelease"){
        sendCMD(14);
    }
    else if($action == "leftArrowRelease"){
        sendCMD(18);
    }
    else if($action == "rightArrowRelease"){
        sendCMD(19);
    }

    //the rest is to display the state
    $pressedColor = "bbffbb";
    $releasedColor = "bbbbbb";

    $upArrowColor = $releasedColor;
    $downArrowColor = $releasedColor;
    $leftArrowColor = $releasedColor;
    $rightArrowColor = $releasedColor;

    if($upPressState == "down"){
        $upArrowColor = $pressedColor;
    }
    if($downPressState == "down"){
        $downArrowColor = $pressedColor;
    }
    if($leftPressState == "down"){
        $leftArrowColor = $pressedColor;
    }
    if($rightPressState == "down"){
        $rightArrowColor = $pressedColor;
    }

    echo("<html><head><style>");
    echo("body{background-color:#000000;}
          div#container{position:absolute;left:10px;top:10px;background-color:#eeeeee;
              font-size:20px;padding:20px;width:100px;height:92px;text-align:center;}
          div.arrow{position:absolute;width:30px;padding-top:2px;padding-bottom:2px;}
          div#upArrow{left:55px;top:20px;background-color:#".$upArrowColor.";}
          div#downArrow{left:55px;top:82px;background-color:#".$downArrowColor.";}
          div#leftArrow{left:20px;top:50px;background-color:#".$leftArrowColor.";}
          div#rightArrow{left:90px;top:50px;background-color:#".$rightArrowColor.";}
          div#lastAction{position:absolute;left:0px;bottom:2px;font-size:14px;color:#ffffee;}");
    echo("</style></head><body onload='parent.controllerReady();'>");
    echo("<div id='container'>
          <div class='arrow' id='upArrow'>&uarr;</div><div class='arrow' id='downArrow'>&darr;</div>
          <div class='arrow' id='leftArrow'>&larr;</div><div class='arrow' id='rightArrow'>&rarr;</div>
          </div><div id='lastAction'>Last Action:<br />".$action."</div>");
    echo("</body></html>");

//cleanup input
    function cleanupSpecialChars($inStr){
        $tempStr = htmlentities(stripslashes($inStr));
        $retStr = str_replace(array('\\','/'), '', $tempStr);
        return $retStr;
    }
    function sendCMD($cmd){
        if($fp =fopen("com4", "wb")){//windows server
            fwrite($fp,$cmd);
            usleep(15000);
            fclose($fp);
        }
        else if($fp =fopen("/dev/ttyS3", "wb")){//linux server
            fwrite($fp,$cmd);
            usleep(15000);
            fclose($fp);
        }
    }
?>

你可以在这里看到它们在我的服务器上运行:http://www.vdstudios.net/robotics/FrontEnd.html

如果您提供有关设备期望的详细信息,我可以帮助您构建串行端口的消息。

编辑:

添加了构建/发送消息到串行端口的代码。还用相同的方式更新了运行示例。您可以在上面的链接中看到它。

编辑 2:

添加了用于缓冲​​ keyEvents 的代码。
添加了用于同步后端和前端状态的代码。

【讨论】:

  • 非常感谢!我放学回家后试试这个。我已经获得了串行端口(后端)的代码和所有设置。这个 JavaScript 是我遇到麻烦的一件事。在此之后,我必须设置一个线路/转弯系统,这样一次只能有一个人开车。哦,我今天也拿到了无线摄像头 :) 欢迎大家在完成后试用。
  • 如果您有兴趣,我添加了一张图片。
  • 所以这段代码运行良好,但我面临另一个问题。当我添加串行通信时,它的响应速度不如以前没有串行。我假设它是因为每次它都必须打开和关闭序列号。发送第一个命令很好,但有时当我释放按钮时,它无法发送停止命令。有任何想法吗?如果您想让我发布任何内容,请告诉我。
  • 不确定你的意思。但是我需要在按下箭头时向控制器发送一个数字(例如 25)。然后当按钮被释放时,它会发送另一个数字(例如 15)。它还需要能够同时按下2个键(不一定是完全相同的时间),这样它才能转动。
  • 我也在考虑使用另一个 iframe。第二个 iframe 可能只是发送串口命令。没有接口。我认为问题的一部分可能是当按钮被按下然后快速释放时,最后一个命令没有发送。可能是。我不确定。
猜你喜欢
  • 2020-06-21
  • 1970-01-01
  • 2012-05-23
  • 2016-10-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-15
相关资源
最近更新 更多