javascriptスムーズな動作について
- javascriptを使用してキー操作による要素の動作を実現する際に、一度の操作ではスムーズな動きができない場合の解決方法について質問です。
- 質問内容は、十字キーの押しっぱなしによって要素を連続的に移動させる際に、最初の動作の後に一時的な停止が生じる状態を解消する方法についてです。
- どのようにすればキーを押した瞬間からスムーズな動きを実現できるのか、アドバイスをいただきたいです。
- ベストアンサー
javascript スムーズな動作
javascriptに関する質問です。 例えば下のようなコードを書いたとします。 if(e.keyCode==39)X=X+10; if(e.keyCode==37)X=X-10; document.getElementById('me'); me.style.left=X; つまり、十字キーの右を押したらキャラクター「me」が10px右へ、左を押したら10px左へ動きます。 質問したいのはキーを押しっぱなしにした場合の動作に関してです。 右を押すと、右へ一度動いて、そこで一度止まり、その後ザーっと動き出します。最初の動作の後にほんのわずかなんですが、「ため」のような間があるために満足いく動きが出せていません。 キーを押した瞬間からスムーズに動かすにはどうしたらよいでしょうか？
- skip_jack
- お礼率63% (30/47)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
おそらくリピートキーイベントが発生するまでの時間のことをおっしゃっているのだと思います。 キーを押すとkeyDownイベントが発生し、それからリピートキーイベントが発生するまでのインターバルはシステムによって管理されています。 キャラクターの移動などでは、キーイベントから直接キャラクターを移動させるのではなく、「移動中」フラグを別に用意して、（キーではなく）タイマーによって『「移動中」フラグがONなら移動を続ける』サブルーチンを作っておき、keyDownイベントでは「移動中」フラグをONにして上記ルーチンを呼び出す、keyUpイベントでは「移動中」フラグをOFFにする、というようにします。
関連するQ&A
- javascript submit()の後の動作
scriptはjsファイルで分離しています。 送信ボタンをクリックした場合の動作は期待通りの動作をしています エンターキーを押したときの動作が、フォームの送信は正常に実行されるのですが、 document.getElementById('ctxt').value= '';が実行されません。 その後、試しにアラートも入れてみましたけど、動作していないようです document.forms[txt_submit].submit();の後の部分が実行されるようにするにはどうしたらいいのでしょうか？ function Key_on(){ if(window.event.keyCode == 13){ document.forms[txt_submit].submit(); document.getElementById('ctxt').value= ''; alert('ん？'); } } function send(){ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } ----------------- <form id="txt_submit" name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" id="ctxt" name="ctxt" size="20" value="" onkeydown="Key_on()"> <input type="button" value="送信" onclick="return send();"> </form>
- ベストアンサー
- JavaScript
- javascript スライドバー
ダイナミックHTMLに掲載されている jsでのスライダーを同一ページで複数使いたいのですが どおうすればいいでしょうか？ <body onLoad="Init()">で読み込んでいます。 詳しい方がいましたらご教授お願い致します。 var iniX = 150; //バーの初期位置(x) var iniY = 0; //バーの初期位置(y) var dY = -45; //バーに対するスライダーの表示位置(y) var dX1 = 0; //バーに対するスライダーの表示位置(x,最も左) var dX2 = 330; //バーに対するスライダーの表示位置(x,最も右) var valx = -120; //バーに対する数値を表示する位置(x) var valy = -120; //バーに対する数値を表示する位置(y) var minValue = 0; //最小値 var maxValue = 1500; //最大値 var iniValue = 0; //初期値 var M_flag = false; var mdx,mdlayx,mmx,mmlayx; var xmax,xmin; function Init(){ dx = dX2 - dX1; x = dx * ((iniValue - minValue) / (maxValue - minValue)); xmin = iniX + dX1; xmax = iniX + dX2; if(document.all){ document.all("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.all("iLf").style.posLeft = xmin + x; document.all("iLf").style.posTop = iniY + dY; document.all("iLb").style.posLeft = iniX; document.all("iLb").style.posTop = iniY; document.all("iLv").style.posLeft = iniX + valx; document.all("iLv").style.posTop = iniY + valy; document.all("iLv").innerHTML = iniValue; }else if(document.layers){ }else if(document.getElementById){ document.getElementById("iLf").onmousedown = Mdown; document.onmouseup = Mup; document.onmousemove = Mmove; document.getElementById("iLf").style.left = xmin + x+"px"; document.getElementById("iLf").style.top = iniY + dY+"px"; document.getElementById("iLb").style.left = iniX+"px"; document.getElementById("iLb").style.top = iniY+"px"; document.getElementById("iLv").style.left = iniX + valx+"px"; document.getElementById("iLv").style.top = iniY + valy+"px"; document.getElementById("iLv").innerHTML = iniValue; document.testimg.width = iniValue/4.5; document.testimg.height = 35; } } function Mdown(e){ if(document.all){ mdx = event.x; mdlayx = document.all("iLf").style.posLeft; }else if(document.layers){ }else if(document.getElementById){ mdx = parseInt(e.pageX); mdlayx = parseInt(document.getElementById("iLf").style.left); } M_flag = true; return false; } function Mup(e){ M_flag = false; return false; } function Mmove(e){ if(document.all){ if(M_flag){ mmx = event.x; mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.all("iLf").style.posLeft = mmlayx; document.all("iLv").innerHTML = x; } event.returnValue = false; }else if(document.layers){ }else if(document.getElementById){ if(M_flag){ mmx = parseInt(e.pageX); mmlayx = (mmx - mdx) + mdlayx; if(mmlayx < xmin) mmlayx = xmin; if(mmlayx > xmax) mmlayx = xmax; x = Math.floor((mmlayx - xmin) / dx * (maxValue - minValue) + minValue); document.getElementById("iLf").style.left = mmlayx+"px"; document.getElementById("iLv").innerHTML = x; document.testimg.width = x/4.5; document.testimg.height = 35; } return false; } }
- 締切済み
- JavaScript
- javascript クロームさんをなんとかしたい
javascriptでchromeだけ挙動が違うので動作を分離しようと考えています。 問題点はsubmit()の後、処理を抜けてしまう点です。 下記'問題の箇所'の行が実行されません(1行前のsubmit()の時点で関数を終了する) 何か対応策はないでしょうか？ ※エッジ、IE、Foxは期待通りの動作です -----jsファイルの内容---- function Key_on(keyCode){ if(keyCode == 13){ var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('chrome') != -1) { document.forms[txt_submit].submit(); document.getElementById('ctxt').value= '';←問題の箇所 }else{ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } } } function send(){ document.txt_submit.submit(); document.getElementById('ctxt').value= ''; } -----htmlの内容---- <form id="txt_submit" name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" id="ctxt" name="ctxt" size="20" value="" onkeydown="Key_on(event.keyCode)"> <input type="button" value="送信" onclick="return send();"> </form>
- ベストアンサー
- JavaScript
- 上下矢印のキーでページ内をスムーズに移動
質問させて下さい。 キーボードの上矢印キーを押すと１００pxずつスムーズに上へ移動。 キーボードの下矢印キーを押すと１００pxずつスムーズに下へ移動。 を実装したいのですが、うまく行きませんでした。 if(e.keyCode == 38){ // Key[↑] $('html,body').scrollTo({top:'-=100px'},800); } と考えてみたんですがうまく行きませんでした。 ご教授願います。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- データグリッドビュー数字と小数点は入力可能
ＶＢ2010にて、データグリッドビューを編集不可にしています。 数字と小数点は入力可能にしたいのですが、 下記のコードを実行すると、 1キーを押すと49と表示されます。 どうしたら、キー値を表示できるようになるのでしょうか？ ご存知の方教えてください。よろしくお願いします。 Private Sub DataGridView1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles DataGridView1.KeyDown '数字と小数点は入力可能 If e.KeyCode >= Keys.D0 And e.KeyCode <= Keys.D9 Or e.KeyCode >= Keys.NumPad0 And e.KeyCode <= Keys.NumPad9 Or e.KeyCode = Keys.Decimal Or e.KeyCode = 190 Then e.Handled = True strTemp = Me.DataGridView1(Me.DataGridView1.SelectedCells(0).ColumnIndex, Me.DataGridView1.SelectedCells(0).RowIndex).Value strTemp = strTemp & e.KeyValue Me.DataGridView1(Me.DataGridView1.SelectedCells(0).ColumnIndex, Me.DataGridView1.SelectedCells(0).RowIndex).Value = strTemp End If 'バックスペース機能追加 If e.KeyCode >= Keys.Back Then e.Handled = True strTemp = Me.DataGridView1(Me.DataGridView1.SelectedCells(0).ColumnIndex, Me.DataGridView1.SelectedCells(0).RowIndex).Value If strTemp = "" Then Exit Sub strTemp = Microsoft.VisualBasic.Left(strTemp, Len(strTemp) - 1) Me.DataGridView1(Me.DataGridView1.SelectedCells(0).ColumnIndex, Me.DataGridView1.SelectedCells(0).RowIndex).Value = strTemp End If If e.Control And e.KeyCode = Keys.V Then 'Ctrl+V押下時は貼付 DGV.Paste(DataGridView1) ElseIf e.KeyCode = Keys.Delete Then 'Delete押下時は削除 DGV.Delete(DataGridView1) End If End Sub
- ベストアンサー
- Visual Basic
- キーボードで画像を動かす方法
javaScriptで、 if (event.keyCode == 38) UP(); if (event.keyCode == 39) RIGHT(); if (event.keyCode == 37) LEFT(); if (event.keyCode == 40) DOWN(); のような処理で、上下左右の方向に画像などを移動させています。 しかし、上キーと右キーを同時に押しても 右上には移動しません。 率直にJavaScriptでキーボード入力を行って 右上、右下、左上、左下のように 2つのキーを同時に押したことを判定する方法は ありますでしょうか？ ためしに＆＆を用いて 上キーと右キーが押されたとき用にUP_RIGHT() を作ってコールしたのですが思ったように動かないようでした。 どうかご教授ください。
- 締切済み
- JavaScript
- javascriptで困っています
javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作 ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか？少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得 できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を 取得できます 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <title>test</title> <style type="text/css"> #panel_board{ width:320px; height:384px; position:relative; } #move_panel{ width:64px; height:64px; position:absolute; background-color:#0F9; z-index:10; } </style> <script type="text/javascript" charset="utf-8"> <!-- function init() { var panel_board = document.getElementById("panel_board"); panel_board.addEventListener("touchstart", function(e){ //クリックしたの場所のマス目 var x = e.touches[0].pageX; var y = e.touches[0].pageY; // 新規に要素div（タグ）を生成 var ele = document.createElement("div"); //idをつける ele.id = "move_panel"; //生成した要素の位置を決める ele.style.left=x+"px"; ele.style.top=y+"px"; // panel_boardに生成した要素を追加 panel_board.appendChild(ele); }, false); panel_board.addEventListener("touchmove", function(e){ //動いた位置を取得 var xx = e.touches[0].pageX; var yy = e.touches[0].pageY; //move_panelを動かす document.getElementById("move_panel").style.left = xx+'px'; document.getElementById("move_panel").style.top = yy+'px'; //位置を表示 document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = xx; document.getElementById("txt2").innerHTML = yy; }, false); panel_board.addEventListener("touchend", function(e){ //要素を消す var mp = document.getElementById("move_panel"); mp.parentNode.removeChild(mp); }, false); } // --> </script> </head> <body onLoad="init();"> <div id="panel_board"> </div> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </body> </html>
- ベストアンサー
- JavaScript
- JavaScript でキーを送る
JavaScript でキーを送る のはどうしたらいいのでしょうか。 キーボードからではなく、自動的に任意のキーを押させたいのです。 // aキーのkeydownイベントを起こす var _e = document.createEvent("KeyboardEvent"); _e.initKeyEvent("keydown", true, true, null, false, false, false, false, 65, 0); document.getElementById("dummy").dispatchEvent(_e); いろいろ検索して上記のも試しましたが、ＩＥ８では動作が確認できませんでした。 ＩＥじゃ無理なんでしょうか。
- ベストアンサー
- JavaScript
- 右綴じのpdfファイルをめくるのに十字キ-の右
右綴じのPDFファイルをめくるのに十字キーの右を押す設定になっています。 右綴じでは左にページをめくっていくのに十字キーは右を押します。 とても紛らわしいので、十字キーの左でページをめくれるように設定を変えることはできないでしょうか？ Acrobat9を使っています。 よろしくお願い致します。
- ベストアンサー
- その他(ソフトウェア)
- Processingでのキーの同時入力
Processingでゲームを作ろうとしているのですがキーボードの同時入力がうまくいきません。 例えば下記のようなキー入力に応じて黒い四角が動くプログラムを実行しました。方向キーを一つだけ押したときはサクサク動いてくれるのですが、→と↓を同時に押しても斜めに進んでくれません。また、→と←を押した場合もどちらか片方の方に動いてしまいます。 このような問題を解決したいので、Processingでキーボードの同時入力を判定するにはどのようにすればいいのか教えてください。 float x, y; void setup(){ size(400, 400); noStroke(); smooth(); } void draw() { background(255,255,255); fill(0,0,0); rect(x,y,20, 20); if (keyPressed && key == CODED){ if (keyCode == LEFT){ x -= 2; } if (keyCode == RIGHT){ x += 2; } if (keyCode == UP){ y -= 2; } if (keyCode == DOWN){ y += 2; } } }
- 締切済み
- その他（プログラミング・開発）
お礼
教えていただきましたように、キーの押・離をフラグで管理して、それを一定時間ごとに見に行くようにすると思うとおりの動きが実現できました。 一人ではこの方法思いつかなかったと思います。 ありがとうございました。