您的位置:首页 > Web前端 > JavaScript

用js实现用回车键、ctrl键在文本框导航

2009-03-06 15:13 453 查看
由于当前开发项目的用户习惯了用小键盘录入数据,如输入1,自动替换为“+++”,输入2,主动替换为“aaa”等,

以及用enter换行,为了适应用户的这些需要,特意写了2段js代码,第一个比较简单,就不贴了,贴第二个功能的,如下:

回车换行,ctrl+回车向上换行

///

///使用方法

///window.onload=loadEnterNav;

///PS:

///1、function keydown里 可以设置是否可以跳出input的enter导航

///2、function loadEnterNav里 可设置文本框获取焦点后的样式和要执行的事件

/*==========一些变量===========*/

var isCtrl = false; //标记是否按下ctrl

var currInput; //当前input

var arrInput = new Array(); //页面文本框数组

//end

function keydown(e) {

var evt = e || window.event;

switch (evt.keyCode) {

case 17: //ctrl

isCtrl = true;

break;

case 13: //enter

if (isCtrl) {

//转到上一行

GoToLastInput(true);

}

else {

//跳转下一行

// evt.keyCode = 9 可以跳出text input导航,进入页面原定导航

GoToLastInput(false); // 只在text input导航

}

break;

default: break;

}

}

function keyup(e) {

var evt = e || window.event;

if (evt.keyCode == 17) {

isCtrl = false;

}

}

function keypress(e) {

var evt = e || window.event;

if (evt.keyCode == 17) {

isCtrl = true;

}

}

/*======向上跳转input=====start======*/

function setobj(input) {

currInput = input;

}

//转到上一行

function GoToLastInput(isLast) {

if (currInput != null) {

for (var i = 0, lth = arrInput.length; i < lth; i++) {

if (currInput == arrInput[i]) {

if (isLast) { //向上跳转

if (i != 0) {

arrInput[i - 1].focus();

}

else {

arrInput[lth - 1].focus();

}

}

else { //向下跳转

if (i < lth-1) {

arrInput[i + 1].focus();

}

}

break;

}

}

}

}

//向上跳转input******end*/

////给文本框添加enter换行事件

function loadEnterNav() {

var t = document.getElementsByTagName("input")

for (i = 0; i < t.length; i++)

if (t[i].type == "text") {

t[i].onfocus = new Function("setobj(this);this.style.backgroundColor='#cccccc';this.select();")

t[i].onblur = new Function("this.style.backgroundColor=''")

t[i].onkeydown = keydown;

t[i].onkeyup = keyup;

t[i].onkeypress = keypress;

//保存页面文本框

arrInput.push(t[i]);

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: