2000年4月22日星期六
CSSでScrollTableを作る
<html>
<head><title></title></head>
<body>
<!--本体部分-->
<DIV>
<SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:100px;height:140px;
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
crollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF"
>
<TABLE border="1" style="width:100%">
<tr>
<td width="50%">F</TD>
<TD width="50%">G</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>P</td>
<td>Q</td>
</tr>
<tr>
<td>U</td>
<td>V</td>
</tr>
<tr>
<td>Z</td>
<td>AA</td>
</tr>
<tr>
<td>EE</td>
<td>FF</td>
</tr>
<tr>
<td>JJ</td>
<td>KK</td>
</tr>
<tr>
<td>OO</td>
<td>PP</td>
</tr>
</TABLE>
</SPAN>
<SPAN id="maincols" style="overflow:scroll;width:300px;height:140px" onscroll="fnc_scroll()">
<TABLE border="1" style="table-layout:fixed;width:450px">
<tr>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td>W</td>
<td>X</td>
<td>Y</td>
</tr>
<tr>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>GG</td>
<td>HH</td>
<td>II</td>
</tr>
<tr>
<td>LL</td>
<td>MM</td>
<td>NN</td>
</tr>
<tr>
<td>QQ</td>
<td>RR</td>
<td>SS</td>
</tr>
</TABLE>
</SPAN>
</DIV>
<SCRIPT language="javascript">
<!--
function fnc_scroll(){
document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop;
}
-->
</SCRIPT>
</body>
</html>
<head><title></title></head>
<body>
<!--本体部分-->
<DIV>
<SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:100px;height:140px;
scrollbar-base-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
crollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF"
>
<TABLE border="1" style="width:100%">
<tr>
<td width="50%">F</TD>
<TD width="50%">G</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
</tr>
<tr>
<td>P</td>
<td>Q</td>
</tr>
<tr>
<td>U</td>
<td>V</td>
</tr>
<tr>
<td>Z</td>
<td>AA</td>
</tr>
<tr>
<td>EE</td>
<td>FF</td>
</tr>
<tr>
<td>JJ</td>
<td>KK</td>
</tr>
<tr>
<td>OO</td>
<td>PP</td>
</tr>
</TABLE>
</SPAN>
<SPAN id="maincols" style="overflow:scroll;width:300px;height:140px" onscroll="fnc_scroll()">
<TABLE border="1" style="table-layout:fixed;width:450px">
<tr>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td>W</td>
<td>X</td>
<td>Y</td>
</tr>
<tr>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>GG</td>
<td>HH</td>
<td>II</td>
</tr>
<tr>
<td>LL</td>
<td>MM</td>
<td>NN</td>
</tr>
<tr>
<td>QQ</td>
<td>RR</td>
<td>SS</td>
</tr>
</TABLE>
</SPAN>
</DIV>
<SCRIPT language="javascript">
<!--
function fnc_scroll(){
document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop;
}
-->
</SCRIPT>
</body>
</html>
Flash素材
2000年4月21日星期五
HTMLでScrollTableを作る
<html>
<head>
<title>Scroll Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="non-cache">
<style type="text/css">
<!--
.t
{
table-layout :fixed;
border-collapse :collapse;
background-color :#007700;
}
.table_title
{
font-size :12;
border-width :1px;
border-style :solid;
color :#FFFFFF;
border-color :#AAAAAA;
text-align :center;
}
.style_1
{
font-size :12;
text-align :center;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_2
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
text-align :center;
background-color :#FFFFBB;
}
.style_3
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_4
{
background-color :#007700;
color :#FFFFFF;
}
.style_5
{
width :368;
height :109;
overflow :auto;
scrollbar-face-color :#007700;
scrollbar-arrow-color:#FFFFFF;
}
-->
</style>
<script type="text/javascript">
function Load() {
// 情報のスクロール位置設定
document.getElementById("scroll").scrollTop = document.getElementById("S_I").value;
}
/*
* 詳細ボタン押下時処理
*/
function OnClick(index) {
// 詳細ボタンのIndex
alert(index);
// 情報検索一覧のスクロール位置を格納
document.getElementById("S_I").value = document.getElementById("scroll").scrollTop;
}
</script>
</head>
<body bgcolor="#EEFFF0" onload="Load()">
<form name="main_form" id="main_form" method="post">
<table style="width:390px">
<tr>
<td>
<!-- ヘッダ部分 -->
<table class="t">
<tr>
<td class="table_title" style='width:60;height:20;'>詳細</td>
<td class="table_title" style='width:60;'>年度</td>
<td class="table_title" style='width:60;'>会計年度</td>
<td class="table_title" style='width:80;'>部門コード</td>
<td class="table_title" style='width:90;'>部門名</td>
</tr>
</table>
<!-- データ部分 -->
<DIV ID="scroll" class="style_5" >
<table style="table-layout: fixed; border-collapse:collapse;">
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('1')" id="detail1">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0001</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('2')" id="detail2">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0002</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('3')" id="detail3">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0003</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('4')" id="detail4">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0004</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('5')" id="detail5">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0005</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('6')" id="detail6">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0006</td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
<!-- 情報検索一覧スクロール位置 -->
<input type="hidden" name="S_I" id="S_I" value="28">
</form>
</body>
</html>
<head>
<title>Scroll Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="non-cache">
<style type="text/css">
<!--
.t
{
table-layout :fixed;
border-collapse :collapse;
background-color :#007700;
}
.table_title
{
font-size :12;
border-width :1px;
border-style :solid;
color :#FFFFFF;
border-color :#AAAAAA;
text-align :center;
}
.style_1
{
font-size :12;
text-align :center;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_2
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
text-align :center;
background-color :#FFFFBB;
}
.style_3
{
font-size :12;
border-width :1px;
border-style :solid;
border-color :#007700;
background-color :#FFFFFF;
}
.style_4
{
background-color :#007700;
color :#FFFFFF;
}
.style_5
{
width :368;
height :109;
overflow :auto;
scrollbar-face-color :#007700;
scrollbar-arrow-color:#FFFFFF;
}
-->
</style>
<script type="text/javascript">
function Load() {
// 情報のスクロール位置設定
document.getElementById("scroll").scrollTop = document.getElementById("S_I").value;
}
/*
* 詳細ボタン押下時処理
*/
function OnClick(index) {
// 詳細ボタンのIndex
alert(index);
// 情報検索一覧のスクロール位置を格納
document.getElementById("S_I").value = document.getElementById("scroll").scrollTop;
}
</script>
</head>
<body bgcolor="#EEFFF0" onload="Load()">
<form name="main_form" id="main_form" method="post">
<table style="width:390px">
<tr>
<td>
<!-- ヘッダ部分 -->
<table class="t">
<tr>
<td class="table_title" style='width:60;height:20;'>詳細</td>
<td class="table_title" style='width:60;'>年度</td>
<td class="table_title" style='width:60;'>会計年度</td>
<td class="table_title" style='width:80;'>部門コード</td>
<td class="table_title" style='width:90;'>部門名</td>
</tr>
</table>
<!-- データ部分 -->
<DIV ID="scroll" class="style_5" >
<table style="table-layout: fixed; border-collapse:collapse;">
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('1')" id="detail1">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0001</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('2')" id="detail2">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0002</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('3')" id="detail3">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0003</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('4')" id="detail4">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0004</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('5')" id="detail5">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0005</td>
</tr>
<tr>
<td class="style_2" style='width:60;'>
<input class="style_4" type=button value='詳細' OnClick="OnClick('6')" id="detail6">
</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:60;'>2005</td>
<td class="style_1" style='width:80;'>9250</td>
<td class="style_3" style='width:90;'>0006</td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
<!-- 情報検索一覧スクロール位置 -->
<input type="hidden" name="S_I" id="S_I" value="28">
</form>
</body>
</html>
2000年4月20日星期四
Key DownのKeyCode
| Macintosh | Windows | ||||||
| キー | NN4 | IE4 | IE5 | NN6 | NN4 | NN6 | IE4,5 |
| powerKey(mac) | -- | -- | -- | -- | -- | -- | -- |
| tab | (9) | -- | 9 | 9 | -- | 9 | 9 |
| caps lock | -- | -- | -- | -- | -- | 240 | 240 |
| shift | -- | -- | 16 | -- | 0 | 16 | 16 |
| ctrl | -- | -- | 17 | -- | 0 | 17 | 17 |
| option(mac) | -- | -- | 18 | -- | -- | -- | -- |
| alt | -- | -- | -- | -- | -- | 18 | 18 |
| return | 13 | -- | 13 | 13 | 13 | 13 | 13 |
| enter(TenKey) | 3 | -- | 13 | 13 | 13 | 13 | 13 |
| insert | -- | -- | -- | -- | 0 | 45 | 45 |
| del | 127 | -- | 46 | 46 | 0 | 46 | 46 |
| back space | 8 | -- | 8 | 8 | 8 | (8) | (8) |
| esc | 27 | -- | 27 | 27 | -- | 27 | 27 |
| clear(mac),Num Lock | 27 | -- | 12 | 12 | -- | 144 | 144 |
| help | 5 | -- | 45 | 45 | -- | -- | -- |
| home | 1 | -- | -- | 36 | 0 | 36 | 36 |
| page up | 11 | -- | -- | 33 | 0 | 33 | 33 |
| page down | 12 | -- | -- | 34 | 0 | 34 | 34 |
| end | 4 | -- | -- | 35 | 0 | 35 | 35 |
| F1 | -- | -- | 112 | 112 | -- | 112 | 112 |
| F2 | -- | -- | 113 | 113 | -- | 113 | 113 |
| F3 | -- | -- | 114 | 114 | -- | 114 | 114 |
| F4 | -- | -- | 115 | 115 | 0 | 115 | 115 |
| F5 | 16 | -- | 116 | 116 | 0 | 116 | 116 |
| F6 | 16 | -- | 117 | 117 | -- | 117 | 117 |
| F7 | 16 | -- | 118 | 118 | 0 | 118 | 118 |
| F8 | 16 | -- | 119 | 119 | 0 | 119 | 119 |
| F9 | 16 | -- | 120 | 120 | 0 | 120 | 120 |
| F10 | 16 | -- | 121 | 121 | -- | 121 | 121 |
| F11 | 16 | -- | 122 | 122 | 0 | 122 | 122 |
| F12 | 16 | -- | 123 | 123 | 0 | -- | 123 |
| PrintScreen (F13) | 16 | -- | 124 | 44 | -- | -- | -- |
| Scroll Lock (F14) | 16 | -- | 125 | 145 | 0 | 145 | 145 |
| Pause (F15) | 16 | -- | 126 | 19 | 0 | 19 | 19 |
| 半角/全角 | -- | -- | -- | -- | -- | 229 | 243←→244 |
| 窓キー | -- | -- | -- | -- | -- | 91 | 91 |
| メニューキー | -- | -- | -- | -- | -- | 93 | 93 |
| 無変換 | -- | -- | -- | -- | -- | 229 | 29 |
| 前候補 | -- | -- | -- | -- | -- | 229 | 229 |
| カタカナ/ひらがな | -- | -- | -- | -- | -- | 229 | 242 |
| ctrl+A | 1 | -- | 17 | 65 | -- | 65 | 65 |
| ctrl+B | 2 | -- | 17 | 66 | -- | 66 | 66 |
| ctrl+C | 3 | -- | 17 | 67 | -- | 67 | 67 |
| ctrl+D | 4 | -- | 17 | 68 | -- | 68 | 68 |
| ctrl+E | 5 | -- | 17 | 69 | 5 | 69 | 69 |
| ctrl+F | 6 | -- | 17 | 70 | -- | 70 | 70 |
| ctrl+G | 7 | -- | 17 | 71 | -- | 71 | 71 |
| ctrl+H | 8 | -- | 17 | 72 | -- | 72 | 72 |
| ctrl+I | 9 | -- | 17 | 73 | -- | 73 | 73 |
| ctrl+J | 10 | -- | 17 | 74 | 10 | 74 | 74 |
| ctrl+K | 11 | -- | 17 | 75 | 11 | 75 | 75 |
| ctrl+L | 12 | -- | 17 | 76 | 12 | 76 | 76 |
| ctrl+M | 13 | -- | 17 | 77 | -- | 77 | 77 |
| ctrl+N | 14 | -- | 17 | 78 | -- | 78 | 78 |
| ctrl+O | 15 | -- | 17 | 79 | -- | 79 | 79 |
| ctrl+P | 16 | -- | 17 | 80 | -- | 80 | 80 |
| ctrl+Q | 17 | -- | 17 | 81 | -- | 81 | 81 |
| ctrl+R | 18 | -- | 17 | 82 | -- | 82 | 82 |
| ctrl+S | 19 | -- | 17 | 83 | -- | 83 | 83 |
| ctrl+T | 20 | -- | 17 | 84 | 20 | 84 | 84 |
| ctrl+U | 21 | -- | 17 | 85 | -- | 85 | 85 |
| ctrl+V | 22 | -- | 17 | 86 | -- | 86 | 86 |
| ctrl+W | 23 | -- | 17 | 87 | -- | 87 | 87 |
| ctrl+X | 24 | -- | 17 | 88 | -- | 88 | 88 |
| ctrl+Y | 25 | -- | 17 | 89 | 25 | 89 | 89 |
| ctrl+Z | 26 | -- | 17 | 90 | -- | 90 | 90 |
| ← | 28 | -- | 37 | 37 | 0 | 37 | 37 |
| → | 29 | -- | 39 | 39 | 0 | 39 | 39 |
| ↑ | 30 | -- | 38 | 38 | 0 | 38 | 38 |
| ↓ | 31 | -- | 40 | 40 | 0 | 40 | 40 |
| space | 32 | -- | 32 | 32 | 32 | 32 | 32 |
| ! | 33 | -- | 16 | 0 | 33 | 49 | 49 |
| " | 34 | -- | 16 | 222 | 34 | 50 | 50 |
| # | 35 | -- | 16 | 0 | 35 | 51 | 51 |
| $ | 36 | -- | 16 | 0 | 36 | 52 | 52 |
| % | 37 | -- | 16 | 0 | 37 | 53 | 53 |
| & | 38 | -- | 16 | 0 | 38 | 54 | 54 |
| (quote) | 39 | -- | 16 | 222 | 39 | 55 | 55 |
| ( | 40 | -- | 16 | 0 | 40 | 56 | 56 |
| ) | 41 | -- | 16 | 0 | 41 | 57 | 57 |
| * | 42 | -- | 16 | 0 | 42 | 59 | 186 |
| + | 43 | -- | 16 | 0 | 43 | 61 | 187 |
| , | 44 | -- | 188 | 188 | 44 | 188 | 188 |
| - | 45 | -- | 189 | 0 | 45 | 189 | 189 |
| . | 46 | -- | 190 | 190 | 46 | 190 | 190 |
| / | 47 | -- | 191 | 191 | 47 | 191 | 191 |
| 0 | 48 | -- | 48 | 48 | 48 | 48 | 48 |
| 1 | 49 | -- | 49 | 49 | 49 | 49 | 49 |
| 2 | 50 | -- | 50 | 50 | 50 | 50 | 50 |
| 3 | 51 | -- | 51 | 51 | 51 | 51 | 51 |
| 4 | 52 | -- | 52 | 52 | 52 | 52 | 52 |
| 5 | 53 | -- | 53 | 53 | 53 | 53 | 53 |
| 6 | 54 | -- | 54 | 54 | 54 | 54 | 54 |
| 7 | 55 | -- | 55 | 55 | 55 | 55 | 55 |
| 8 | 56 | -- | 56 | 56 | 56 | 56 | 56 |
| 9 | 57 | -- | 57 | 57 | 57 | 57 | 57 |
| : | 58 | -- | 16 | 0 | 58 | 59 | 186 |
| ; | 59 | -- | 186 | 59 | 59 | 61 | 187 |
| < | 60 | -- | 16 | 0 | 60 | 188 | 188 |
| = | 61 | -- | 187 | 61 | 61 | 109 | 189 |
| > | 62 | -- | 16 | 0 | 62 | 190 | 190 |
| ? | 63 | -- | 16 | 0 | 63 | 191 | 191 |
| @ | 64 | -- | 16 | 0 | 64 | 192 | 192 |
| A | 65 | -- | 65 | 65 | 65 | 65 | 65 |
| B | 66 | -- | 66 | 66 | 66 | 66 | 66 |
| C | 67 | -- | 67 | 67 | 67 | 67 | 67 |
| D | 68 | -- | 68 | 68 | 68 | 68 | 68 |
| E | 69 | -- | 69 | 69 | 69 | 69 | 69 |
| F | 70 | -- | 70 | 70 | 70 | 70 | 70 |
| G | 71 | -- | 71 | 71 | 71 | 71 | 71 |
| H | 72 | -- | 72 | 72 | 72 | 72 | 72 |
| I | 73 | -- | 73 | 73 | 73 | 73 | 73 |
| J | 74 | -- | 74 | 74 | 74 | 74 | 74 |
| K | 75 | -- | 75 | 75 | 75 | 75 | 75 |
| L | 76 | -- | 76 | 76 | 76 | 76 | 76 |
| M | 77 | -- | 77 | 77 | 77 | 77 | 77 |
| N | 78 | -- | 78 | 78 | 78 | 78 | 78 |
| O | 79 | -- | 79 | 79 | 79 | 79 | 79 |
| P | 80 | -- | 80 | 80 | 80 | 80 | 80 |
| Q | 81 | -- | 81 | 81 | 81 | 81 | 81 |
| R | 82 | -- | 82 | 82 | 82 | 82 | 82 |
| S | 83 | -- | 83 | 83 | 83 | 83 | 83 |
| T | 84 | -- | 84 | 84 | 84 | 84 | 84 |
| U | 85 | -- | 85 | 85 | 85 | 85 | 85 |
| V | 86 | -- | 86 | 86 | 86 | 86 | 86 |
| W | 87 | -- | 87 | 87 | 87 | 87 | 87 |
| X | 88 | -- | 88 | 88 | 88 | 88 | 88 |
| Y | 89 | -- | 89 | 89 | 89 | 89 | 89 |
| Z | 90 | -- | 90 | 90 | 90 | 90 | 90 |
| [ | 91 | -- | 219 | 219 | 91 | 219 | 219 |
| \ | 92 | -- | 220 | 220 | 92 | 226 | 220 |
| ] | 93 | -- | 221 | 221 | 93 | 221 | 221 |
| ^ | 94 | -- | 16 | 0 | 94 | 222 | 222 |
| _ | 95 | -- | 16 | 0 | 95 | 226 | 226 |
| ` | 96 | -- | 192 | 192 | 96 | 192 | 192 |
| a | 97 | -- | 65 | 65 | 97 | 65 | 65 |
| b | 98 | -- | 66 | 66 | 98 | 66 | 66 |
| c | 99 | -- | 67 | 67 | 99 | 67 | 67 |
| d | 100 | -- | 68 | 68 | 100 | 68 | 68 |
| e | 101 | -- | 69 | 69 | 101 | 69 | 69 |
| f | 102 | -- | 70 | 70 | 102 | 70 | 70 |
| g | 103 | -- | 71 | 71 | 103 | 71 | 71 |
| h | 104 | -- | 72 | 72 | 104 | 72 | 72 |
| i | 105 | -- | 73 | 73 | 105 | 73 | 73 |
| j | 106 | -- | 74 | 74 | 106 | 74 | 74 |
| k | 107 | -- | 75 | 75 | 107 | 75 | 75 |
| l | 108 | -- | 76 | 76 | 108 | 76 | 76 |
| m | 109 | -- | 77 | 77 | 109 | 77 | 77 |
| n | 110 | -- | 78 | 78 | 110 | 78 | 78 |
| o | 111 | -- | 79 | 79 | 111 | 79 | 79 |
| p | 112 | -- | 80 | 80 | 112 | 80 | 80 |
| q | 113 | -- | 81 | 81 | 113 | 81 | 81 |
| r | 114 | -- | 82 | 82 | 114 | 82 | 82 |
| s | 115 | -- | 83 | 83 | 115 | 83 | 83 |
| t | 116 | -- | 84 | 84 | 116 | 84 | 84 |
| u | 117 | -- | 85 | 85 | 117 | 85 | 85 |
| v | 118 | -- | 86 | 86 | 118 | 86 | 86 |
| w | 119 | -- | 87 | 87 | 119 | 87 | 87 |
| x | 120 | -- | 88 | 88 | 120 | 88 | 88 |
| y | 121 | -- | 89 | 89 | 121 | 89 | 89 |
| z | 122 | -- | 90 | 90 | 122 | 90 | 90 |
| { | 123 | -- | 16 | 219 | 123 | 219 | 219 |
| | | 124 | -- | 16 | 0 | 124 | 220 | 220 |
| } | 125 | -- | 16 | 221 | 125 | 221 | 221 |
| ~ | 126 | -- | 16 | 0 | 126 | 48 | 222 |
| TenKey : * | 42 | -- | 106 | 106 | 42 | 106 | 106 |
| TenKey : + | 43 | -- | 107 | 107 | 43 | 107 | 107 |
| TenKey : - | 45 | -- | 109 | 109 | 45 | 108 | 109 |
| TenKey : . | 46 | -- | 110 | 110 | 46 | 110 | 46 |
| TenKey : / | 47 | -- | 111 | 111 | 47 | 111 | 111 |
| TenKey : 0 | 48 | -- | 96 | 96 | 48 | 96 | 45 |
| TenKey : 1 | 49 | -- | 97 | 97 | 49 | 97 | 35 |
| TenKey : 2 | 50 | -- | 98 | 98 | 50 | 98 | 40 |
| TenKey : 3 | 51 | -- | 99 | 99 | 51 | 99 | 34 |
| TenKey : 4 | 52 | -- | 100 | 100 | 52 | 100 | 37 |
| TenKey : 5 | 53 | -- | 101 | 101 | 53 | 101 | 12 |
| TenKey : 6 | 54 | -- | 102 | 102 | 54 | 102 | 39 |
| TenKey : 7 | 55 | -- | 103 | 103 | 55 | 103 | 36 |
| TenKey : 8 | 56 | -- | 104 | 104 | 56 | 104 | 38 |
| TenKey : 9 | 57 | -- | 105 | 105 | 57 | 105 | 33 |
備考:
Netscape Navigator 4.x(NN4.x)
2000年4月18日星期二
文本入力時のIME状態設定
ime-modeプロパティは、Internet Explorerが独自に追加した仕様で、テキスト入力時のIMEの状態を指定する際に使用します。IMEとはInput Method Editorの略で、日本語を入力するためのソフトのことです。 日本語入力ソフトには、Windowsの「MS-IME」やマッキントッシュの「ことえり」、ジャストシステム社の「ATOK(エイトック)」などがあります。
■値
auto -> 特に指定しません。
active -> 初期値が日本語入力モードになります。
inactive -> 初期値が英数字入力モードになります。
disabled -> 英数字入力モードになります。ユーザーの操作によるモードの変更はできません。
■使用例
ID:【英数字入力モードになります。ユーザーの操作によるモードの変更はできません】
名前:【初期値が日本語入力モードになります】
メール:【初期値が英数字入力モードになります】
備考:【特に指定しません】
↓↓Source↓↓
<html>
<head><title></title></head>
<body>
<form>
ID<br>
<input type="text" name="mail" size="30" style="ime-mode: disabled;"><br>
名前<br>
<input type="text" name="name" size="40" style="ime-mode: active;"><br>
メール<br>
<input type="text" name="mail" size="40" style="ime-mode: inactive;"><br>
備考:<br>
<textarea name="bikou" rows="2" cols="40" style="ime-mode: auto;"></textarea><br>
</form>
</body>
</html>
■値
auto -> 特に指定しません。
active -> 初期値が日本語入力モードになります。
inactive -> 初期値が英数字入力モードになります。
disabled -> 英数字入力モードになります。ユーザーの操作によるモードの変更はできません。
■使用例
ID:【英数字入力モードになります。ユーザーの操作によるモードの変更はできません】
名前:【初期値が日本語入力モードになります】
メール:【初期値が英数字入力モードになります】
備考:【特に指定しません】
↓↓Source↓↓
<html>
<head><title></title></head>
<body>
<form>
ID<br>
<input type="text" name="mail" size="30" style="ime-mode: disabled;"><br>
名前<br>
<input type="text" name="name" size="40" style="ime-mode: active;"><br>
メール<br>
<input type="text" name="mail" size="40" style="ime-mode: inactive;"><br>
備考:<br>
<textarea name="bikou" rows="2" cols="40" style="ime-mode: auto;"></textarea><br>
</form>
</body>
</html>
2000年4月3日星期一
Html自制确认对话框
標準の alert や confirm では ボタンの内容を変更する機能はありませんが、
下記のように showModalDialog を使用し自作のダイアログを使用する方法もあります。
以下、簡単なサンプルです。
C:\myDialog.html を作成(実際はURLとして呼び出せる場所に配置し、それを呼び出す。)
<HTML>
<HEAD>
<TITLE> My Dialog</TITLE>
<script type="text/javascript"><!--
function init() {
document.myform.buttonA.value = window.dialogArguments[1];
document.myform.buttonB.value = window.dialogArguments[2];
document.getElementById("message").innerHTML = window.dialogArguments[0];
}
// --></script>
</HEAD>
<BODY onload="init();">
<FORM name="myform">
<div id="message"></div>
<input type="button" name="buttonA" value="" onClick="returnValue=true; self.window.close()">
<input type="button" name="buttonB" value="" onClick="returnValue=false; self.window.close()">
</BODY>
</HTML>
呼び出し側は適当に作成します。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
ダイアログテスト
<script type="text/javascript"><!--
args = new Array();
args[0] = "ハイかイイエで答えてください。";
args[1] = "ハイ";
args[2] = "イイエ";
val = showModalDialog("C:\\myDialog.html", args,"status:false;dialogWidth:320px;dialogHeight:90px");
alert( val );
//--></script>
</BODY>
</HTML>
下記のように showModalDialog を使用し自作のダイアログを使用する方法もあります。
以下、簡単なサンプルです。
C:\myDialog.html を作成(実際はURLとして呼び出せる場所に配置し、それを呼び出す。)
<HTML>
<HEAD>
<TITLE> My Dialog</TITLE>
<script type="text/javascript"><!--
function init() {
document.myform.buttonA.value = window.dialogArguments[1];
document.myform.buttonB.value = window.dialogArguments[2];
document.getElementById("message").innerHTML = window.dialogArguments[0];
}
// --></script>
</HEAD>
<BODY onload="init();">
<FORM name="myform">
<div id="message"></div>
<input type="button" name="buttonA" value="" onClick="returnValue=true; self.window.close()">
<input type="button" name="buttonB" value="" onClick="returnValue=false; self.window.close()">
</BODY>
</HTML>
呼び出し側は適当に作成します。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
ダイアログテスト
<script type="text/javascript"><!--
args = new Array();
args[0] = "ハイかイイエで答えてください。";
args[1] = "ハイ";
args[2] = "イイエ";
val = showModalDialog("C:\\myDialog.html", args,"status:false;dialogWidth:320px;dialogHeight:90px");
alert( val );
//--></script>
</BODY>
</HTML>
订阅:
博文 (Atom)