フォームの要素をEnterキーで移動ができ、マウスオーバーで色が変わり、フォーカスで色も変えられるという、ちょっとだけ便利なやつ!(相変わらずタイトルが長い)
フォームの要素間の移動は、[Enter]キーで、1つ戻す場合は、[Shift]+[Enter]で行います。
checkbox,radio をチェックするときは、[Ctrl]+[Enter]で行います
textarea の移動は、[Ctrl]+[Enter]で行います
button,submit の実行は、[Ctrl]+[Enter]です。これで、マウスに持ち替えなくても利用できそう〜!?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> table { border-collapse: separate; border: 1px #888 solid; } td { border-color: #fff #aaa #ccc #fff; background-color:#f8f8f8; } th { border-color: #fff #aaa #aaa #fff; background-color:#ddd; font-size: medium; } td, th { color : #766; padding : 3px 3px 2px; border-width : 1px; border-style: solid; text-align :left; font-weight :normal; white-space: nowrap; } .fmFocus { border: 1px #f88 inset; background-color:#fee; } .fmBlur { background-color:#eee; border: 1px #ccc inset; } .fmHover { border: 1px red inset; background-color:#ffe; } </style> <form> <table cellspacing="0"> <tr> <th>名前<em>(必須)</em> <td><input type="text" id="new_Name" size="30" maxlength="20"> <tr> <th>ふりがな <td><input type="text" id="new_Furigana" size="30" maxlength="20" value=""> <tr> <th>生年月日 <td> <input type="text" name="BirthDay_date" size="6"> 年 <input type="text" name="BirthDay_date" size="4"> 月 <input type="text" name="BirthDay_date" size="4"> 日 <tr> <th>性別 <td> <input type="radio" value="m" name="sex" id="new_Sex0" checked><label for="new_Sex0">男</label> / <input type="radio" value="w" name="sex" id="new_Sex1"><label for="new_Sex1">女</label> <tr> <th>その他事項 <td><textarea rows="15" cols="45" id="new_Note"></textarea> <tr> <th><em>登録確認</em> <td><input type="button" value="登録" id="bt_rg" style="color:red"> </table> </form> <script type="text/javascript"> //@cc_on //****** エンターキーでフォーカス移動 ****** (function ( Listener ) { document./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'keypress', Listener, false ); window./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'unload', function ( ) { document./*@if( @_jscript ) detachEvent('on' + @else@*/ removeEventListener( /*@end@*/ 'keypress', Listener, false ); window./*@if( @_jscript ) detachEvent('on' + @else@*/ removeEventListener( /*@end@*/ 'unload', arguments.callee, false ); }, false ); })( //Listener (function ( getN, getP ) { return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var keyCode = evt./*@if( @_jscript ) keyCode @else@*/ which /*@end@*/; var shift = evt.shiftKey; var ctrl = evt.ctrlKey; var flag = true, n; if( !/INPUT|TEXTAREA|SELECT/.test( e.nodeName ) ) return; if( 27 == keyCode ) return e.blur(); if( 13 == keyCode ) { if( /radio/.test( e.type ) && ctrl ) e.checked = true; if( /checkbox/.test( e.type ) && ctrl ) e.checked = !e.checked; if( /submit|reset|button/.test( e.type ) && ctrl ) flag = false; if( 'TEXTAREA' === e.nodeName && !ctrl && !shift ) flag = false; if( flag ) { n = shift ? getP( e ): getN( e ); if( n ) try { n.focus(); } catch( err ) { ;} return evt./*@if( @_jscript ) returnValue = false @else@*/ preventDefault() /*@end@*/; } } }; })( function ( n ) { var e; do { if( !( e = n.firstChild ) ) while( !( e = n.nextSibling ) ) if( !( n = n.parentNode ) ) return null; n = e; } while ( 1 !== n.nodeType || !/INPUT|TEXTAREA|SELECT/.test( n.nodeName ) || 'hidden' === n.type ); return n; }, function ( n ) { var e, e2; do { if( e = n.previousSibling ) while( e2 = e.lastChild ) e = e2; n = e || n.parentNode ; } while ( !n || 1 !== n.nodeType || !/INPUT|TEXTAREA|SELECT/.test( n.nodeName ) || 'hidden' === n.type ); return n; } ) ); //_______________________________ //****** トークンリスト ****** var TokenList = (function ( cut, has ) { return function ( type ) { return { 'contains': function ( e, name ) { if( !has( e[ type ], name ) ) { var keys = cut( name ); var cnt = 0, key; while( key = keys[ cnt++ ] ) if( !has( e[ type ], key ) ) return false; } return true; }, 'add': function ( e, name ) { var keys = cut( name ); var buf = [ ], cnt = 0, key; while( key = keys[ cnt++ ] ) has( e[ type ], key ) || buf.push( key ); e[ type ] += ( e[ type ] ? '\u0020': '' ) + buf.join( '\u0020' ); return e[ type ]; }, 'remove': function ( e, name ) { var keys = cut( e[ type ] ); var buf = [ ], cnt = 0, key; while( key = keys[ cnt++ ] ) has( name, key ) || buf.push( key ); return e[ type ] = buf.join( '\u0020' ); }, 'toggle': function ( e, name ) { var keys = cut( name ); var aBuf = [ ], dBuf = [ ]; var key, cnt = 0; while( key = keys[ cnt++ ] ) has( e[ type ], key ) ? dBuf.push( key ): aBuf.push( key ); e[ type ] += ( e[ type ] ? '\u0020': '' ) + aBuf.join( '\u0020' ); dBuf.length && this.remove( e, dBuf.join( '\u0020' ) ); return e[ type ]; }, 'length': function ( e ) { return cut( e[ type ] ).length; }, 'item': function ( e, num ) { var a = cut( e[ type ] ) || [ ]; return 'undefined' === typeof num ? a: a[ num ]; } }; }; })( function ( s ) { return ( '' + s ).split( /\u0020+/ ); }, function ( s, n ) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); } ); ClassList = TokenList( 'className' ); //______________________________________ //****** 自動でフォーカスされたstyleを変える ****** var AutoFocus = (function ( createListener ) { return function ( target, css_on, css_out, css_hover ) { var listener = createListener( css_on, css_out, css_hover ); var forms = [ ], cnt = 0, fm; var emts = [ ], cnt2 = 0, emt; if( 'FORM' == target.nodeName ) forms.push( target ); else forms = target.getElementsByTagName( 'form' ); while( fm = forms[ cnt ++ ] ) { emts = fm.elements; while( emt = emts[ cnt2++ ] ) { if( 'TEXTAREA' == emt.nodeName || ( 'INPUT' == emt.nodeName && 'text' == emt.type ) ) ClassList.add( emt, css_out ); } } if( css_on ) target./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ /*@if( @_jscript ) 'focusin' @else@*/ 'focus' /*@end@*/, listener, true ); if( css_out ) target./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ /*@if( @_jscript ) 'focusout' @else@*/ 'blur' /*@end@*/, listener, true ); if( css_hover ) target./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener( /*@end@*/ 'mouseover', listener, true ); }; })( function ( css_on, css_out, css_hover ) { var memory; return function ( evt ) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; if( memory ) { ClassList.remove( memory, css_hover ); memory = null; } if( /INPUT|TEXTAREA/.test( e.nodeName ) && ! /checkbox|radio|button/.test( e.type ) ) { if( 'mouseover' === evt.type ) { ClassList.add( e, css_hover ); memory = e; } else ClassList.toggle( e, css_on + ' ' + css_out ); } }; } ); //______________________________________ AutoFocus( document, 'fmFocus', 'fmBlur', 'fmHover' ); </script>