ホームページ > ウェブフロントエンド > jsチュートリアル > jsでフォーカスを制御する上下左右キー(サンプルコード)_javascriptスキル

jsでフォーカスを制御する上下左右キー(サンプルコード)_javascriptスキル

WBOY
リリース: 2016-05-16 17:09:14
オリジナル
1115 人が閲覧しました

以下に示すように:

コードをコピーします コードは次のとおりです:

/ /begin-- -------------上下左右キーコントロール

if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){

var texts = new Array();
//フォーカスがある場所に設定します
var x = 2;
var y = 3;
var maxx = 0;
var maxy = 0;
window.onload=function(){
var inputs = $("[location]");
for(var i = 0; i < inputs.length; i ){
texts.push(inputs[i]);
}
for(var i = 0; i texts[i].onfocus = new Function( "setCurrent('" texts[i].getAttribute("location") "')");
var crtx = parseInt(texts[i].getAttribute("location").split(",") [0 ]);
var crty = parseInt(texts[i].getAttribute("location").split(",")[1]);
maxx = maxx maxy = maxy < crty : maxy;
texts[i].onkeydown = function(e){
e = e || switch(e.keyCode) {
case 38:setPosition(x,y,38);break;// Upper
case 40:setPosition(x,y,40);break;// Lower
case 37:setPosition(x ,y ,37);break;// 左
case 39:setPosition(x,y,39);break;// 右
case 45:setPosition(x,y,45);break; // Insert キー /入力ボックスのリターン キーは削除であり、入力ライブラリに値がある場合は削除し、そうでない場合は前のページに戻ります
default:return true;
}
};
}
};
関数 setPosition(x,y,keyCode){

//ここに位置を動的に変更するロジックを追加します----開始

//上下するときは、y 座標のみが変更され、x 座標は自動的に変更されます
//は左右で、x 座標と y 座標のみが変更されます。 自動的に変更されます
if(keyCode == '38' && x == '3'){
if(y=='3'||y =='4'||y=='5'|y=='6'||y=='7'||y=='8'){
y='3';
}
}
if(keyCode == '40' && x == '4'){
if(y=='3'||y=='4'||y== '5'||y=='6'||y =='7'||y=='8'){
y='3';
}
}
/ /動的に位置を変更するロジックをここに追加します---終了

if(keyCode == '38'){

x = --x;
}
if(keyCode == '40'){
x = x;
if(keyCode == '37'){
y = --y;
}
if(keyCode == '39'){
y = y;
movePosition(x,y,keyCode);
}
function movePosition(x1,y1,keyCode){
if(keyCode == '45'){
//カーソルの位置オブジェクトが見つかったとき input
var st = x1 "," y1;
if($("input[location='" st "']").attr("type")=="text "){
var oldval = $("input[location='" st "']").val();
var newval = oldval.substring(0,oldval.length-1);
$( "input[location='" st "']").val(newval);
return false;
}else{
history.go(-1); ;
}
}
x1 = x1 > maxy ? 1 : y1;
x1 y1 = y1
var j = 0;
for(; j < texts.length; j ){
if(texts[j].getAttribute("location") == x1 "," y1){
texts[j].focus();

break;

}
}
if(j == texts.length){
switch(keyCode){
case 38 :movePosition(--x1,y1,keyCode);break;// 大文字
40:movePosition(x1,y1,keyCode);break;// 小文字
37:movePosition(x1,--y1) ,keyCode);break;// 左
case 39:movePosition(x1, y1,keyCode);break;// 右
}
}
}
function setCurrent(location){
x = location.split(",")[0];
y = location.split(",")[1];
}
}
//end-- -------------上下左右のキーを使用して


を制御します

関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート