Home >Web Front-end >JS Tutorial >js up, down, left and right keys to control focus (sample code)_javascript skills

js up, down, left and right keys to control focus (sample code)_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:09:141139browse

As shown below:

Copy the code The code is as follows:

//begin-- -------------Up, down, left and right key controls

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

var texts = new Array();
//Set to the location where focus is located
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.length; 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 < crtx ? crtx : maxx;
maxy = maxy < crty ? crty : maxy;
texts[i].onkeydown = function(e){
e = e || window.event;
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;// Left
case 39:setPosition(x,y,39);break;// Right
case 45:setPosition(x,y,45);break; // Insert key /The return key in the input box is to delete and when the input library has a value, it is to delete, otherwise it is to return to the previous page
default:return true;
}
};
}
};
function setPosition(x,y,keyCode){

//Add the logic of dynamically changing the position here----begin
//When going up and down, only the y coordinate is changed, and the x coordinate changes automatically
//When it is left and right, only the x coordinate and y coordinate are changed Automatically change
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';
}
}
//Add the logic of dynamically changing position here----end

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'){
//Where the cursor is located When the object is 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);
return false;
}
}
x1 = x1 > maxx ? 1 : x1;
y1 = y1 > maxy ? 1 : y1;
x1 = x1 < 1 ? maxx : x1;
y1 = y1 < 1 ? maxy : 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;// Upper
case 40:movePosition(x1,y1,keyCode);break;// Lower
case 37:movePosition(x1,--y1 ,keyCode);break;// Left
case 39:movePosition(x1, y1,keyCode);break;// Right
}
}
}
function setCurrent(location){
x = location.split(",")[0];
y = location.split(",")[1];
}
}
//end-- -------------Use up, down, left and right keys to control

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn