webでもカーソル移動
こんな感じ。
- maxlengthを設定したテキストボックスで、フル桁入力したら次の項目にカーソルを移動します。
- フル桁入力している場合は、Enterキー押下でも次の項目にカーソルを移動します。
- prototype.js(バージョン:1.6.0)を使ってます。（ちなみに1.5.1.2だとIE6では動かなかった。）
- 半角とか全角とか考慮してません。
- 「次」とはElementsの参照番号順での次です。
- IE6では、Enterキーでの移動時に次の項目がテキストボックス以外だと選択状態のままぽい。（謎）
- 同じ内容を再入力すると移動しません。仕様です。
- 動作確認は、IE6とFirefox2.0.0.13のみです。後は知らん。
上の内容を適当な名前をつけて保存し、head部に以下のような感じで記述すればＯＫです。
Event.observe(window, 'load', function(){
var val;
function input_focus() {
if (this.type == "text") {
val = this.value;
}
}
function input_keypress() {
if (this.type == "text") {
m = eval(this.maxLength);
if (m > 0) {
if (new String(this.value).length == m) {
if (!myEvent) myEvent = event;
if (myEvent.keyCode == Event.KEY_RETURN) {
frm = this.form;
setNextEntryInput(frm, this);
try {
event.keyCode = 0;
} catch(e) {
}
}
}
}
}
}
function input_keyup() {
if (this.type == "text") {
if (this.value != val) {
m = eval(this.maxLength);
if (m > 0) {
if (new String(this.value).length == m) {
frm = this.form;
setNextEntryInput(frm, this);
}
}
}
}
}$A(document.getElementsByTagName("input")).each(function(obj, index){
Event.observe(obj, 'focus', input_focus, false);
Event.observe(obj, 'keypress', input_keypress, false);
Event.observe(obj, 'keyup', input_keyup, false);
});// for Firefox
var myEvent;
if(window.addEventListener){
document.addEventListener('keypress',function(e){ myEvent = e }, true);
}
}, false);function getElementNumber(frm, target) {
rtn = -1;
for(i=0; i < frm.elements.length; i++) {
obj = frm.elements[i];
if (target == obj) {
rtn = i;
break;
}
}
return rtn;
}
function setNextEntryInput(frm, thisobj) {
elm = getElementNumber(frm, thisobj);
if (elm >= 0) {
next_elm = elm + 1;
do {
obj = frm.elements[next_elm];
if (obj) {
flg = true;
if (obj.type == "hidden") flg = false;
if (obj.disabled == true) flg = false;
if (flg == true) {
break;
} else {
next_elm++;
}
} else {
next_elm = -1;
break;
}
} while (next_elm < frm.elements.length)
if (next_elm >= 0) {
obj = frm.elements[next_elm];
if (obj) {
obj.focus();
if (obj.type == "text") {
obj.select();
}
}
}
}
}
