jQuery3
JQueryとJSは混ぜて書ける。
JSを複数書くことも可能。
今回は、時刻の表示、入力、ボタンによるリセットをいくつかの方法で行ってみました。
＜HTML＞
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8" /> <title>イベント</title> <script src="../../jquery-1.9.1.min.js"></script> <!--JSでリアルタイムに時間を表示するためのライブラリ--> <script type="text/javascript" src="jquery.todate.js" charset="utf-8"></script> <script type="text/javascript" src="sample.js" charset="utf-8"></script> </head> <body> <div id="box"> <form> イベントの練習（アラート表示） <button id="btn">click</button></td> <button id="btn1">mouseover</button></td> <button id="btn2">mouseout</button></td> <hr /> <table> <tr><td>名前</td> <td>：<input id="name" type="text" name="name" size="10" maxlength="25" style="ime-mode: active;"></td> </tr> <tr><td>年齢</td> <td>：<input id="age" type="text" name="age" style="ime-mode:disabled"></td> </tr> <tr><td>年齢</td> <td>：<input id="age2" type="text" name="age" style="ime-mode:disabled"></td> </tr> </table> </form> <table> <tr><td>出社時刻</td> <td>：<input id="time" type="text" name="time"> <button id="jsnowtimebtn4">jsで現在の時刻を表示</button> <button id="jsnowtimereset">時刻をクリアする</button> </td> </tr> </table> </div> <h4>jsでアクセス時刻を表示する：<span id="jsaccesstime1"></span></h4> <h4>jQueryでアクセス時刻を表示する：<span id="jqaccesstime1"></span></h4> <h4>jsで現在の時刻を表示</button> <span id="jsaccesstime3"></span></h4> <h4>jQで現在の時刻を表示</button> <span id="jqaccesstime3"></span></h4> <p><button id="jsnowtimebtn">jsでアクセス時刻を表示</button> <span id="jsaccesstime2">今の時間は？</span></p> <p><button id="jqnowtimebtn">jQでアクセス時刻を表示</button> <span id="jqaccesstime2"></span></p> </body> </html>
HTMLでtextboxのIME入力モードを指定する方法
active：初期値が日本語入力モード。
inactive：初期値が英数字入力モード。
disabled：英数字入力モード。ユーザーの操作によるモードの変更はできません。
http://www.htmq.com/style/ime-mode.shtml
・全て小文字で表示させたい場合は、text-transform: lowercase;}
http://www.htmq.com/style/text-transform.shtml
textの書き換えを行う場合、form内にbuttonを置いてはいけない。
form内に置くとデータとして送られてしまい一瞬だけ表示して消えてしまう。
formタグ外のボタンを押したときに通信を行には、ボタンのname属性でhiddenを指定。
hiddenの親にあたるformのsubmit()を呼び出せばよろしい。
でこっそり情報を渡せる。
※form内に書かなければいけない場合（昔の一部ブラウザで下記の現象があったようです。
現在は、Mozillaもform要素の外側でもname属性が同じであれば、ひとつのグループとして扱うよう変更されました。）
・input[type="radio"]がform要素外にあると複数選択できてしまう
・ラジオボタンを一つを選んでも前に選ばれた物がそのままチェックされて残ってしまう。
＜JSファイル＞
//イベントの書き方
//※focusやclickのようにjsではonclickの『on』がつくがjQueryはつかない
//複数の記述も可。JSと混ぜて書くのも可能。
/*===============================
//アラートの表示
================================*/
$(function(){
$('#btn').click(function(){
//console.log('clicked');⇒fiebugのコンソール画面で変化が確認できない
alert('clicked');
});
});
$(function(){
$('#btn1').mouseover(function(){
alert('mouseover');
});
});
$(function(){
$('#btn2').mouseout(function(){
alert('mouseout');
});
});
/*=====================================================
//テキストボックスがフォーカスになった時に背景色を変える
======================================================*/
$(function(){
//『:text』はtype属性がtextであるinput要素のフォームフィルタ
$("#box input:text")
.focus(function(){
$(this).css("background-color", "#ffffc0");
})
.blur(function(){
$(this).css("background-color", "white");
})
});
/*=====================================================
//時刻の表示（jQ版）・・・年月日日時分
======================================================*/
//※書式を調整するにはプラグインが必要
$(function(){
var getTime = $.now();
var date = new Date(getTime).toLocaleString();
//console.log(date);
$('#jqaccesstime1').text(date);
});
/*=====================================================
//現在の時刻をリアルタイムに表示（jQ版）・・・年月日日時分
======================================================*/
//http://shanabrian.com/web/jquery/date01.php からライブラリを持ってきたました。
$(document).ready(function() {
$('#jqaccesstime3').toDate({
format : 'H時i分s秒'
// format : 'Y年m月d日 （W） h時i分s秒'
});
});
/*下記だとフォーマットが変更できないようです。
$(function(){
setInterval( function(){
$("#time").text(Date());
}, 1000);
});
*/
/*=====================================================
//ボタンクリック時、時刻を表示（JQ版）
======================================================*/
//1970年1月1日0時0分0秒から経過した時間の取得
$(function(){
$('#jqnowtimebtn').click(function(){
var getTime = $.now();
var date = new Date(getTime).toLocaleString();
//テキストボックス外へ表示
$('#jqaccesstime2').text(date);
});
});
/*=====================================================
//時刻の入力
======================================================*/
//1970年1月1日0時0分0秒から経過した時間の取得
$(function(){
$('#nowtimebtn').click(function(){
var getTime = $.now();
var date = new Date( getTime ) . toLocaleString();
//テキストボックス外へ表示
$( '#textdemo' ) . text( date );
});
});
/*=====================================================
//JSで記述した場合の時刻表示
======================================================*/
//※window.onloadは1ページに1度の記述しか認められていない。
window.onload = init;
function init(){
timeshow();
timebtnonclick();
realtimeshow();
timebtnonclicktextbox();
textboxreset();
//NumberoOnly();
}
/*=====================================================
//時刻の表示（JS版）
======================================================*/
function timeshow(){
//日付オブジェクト生成
var dateObj= new Date();
//年・月・日・時・分・秒を読みだす
var yyyy = dateObj.getFullYear() + "年"
var mm = dateObj.getMonth() + 1 + "月";
var dd = dateObj.getDate() + "日" ;
//曜日 0:日 1:月 2:火 3:水 4:木 5:金 6:土
var day = dateObj.getDay();
var h = dateObj.getHours();
var m = dateObj.getMinutes();
var s = dateObj.getSeconds();
document.getElementById("jsaccesstime1").innerHTML = yyyy+mm+dd+h+"時"+m+"分"+s+"秒";
}
/*=====================================================
//現在の時刻をリアルタイムに表示（JS版）・・・年月日日時分
======================================================*/
function realtimeshow(){
myClock.time();
setInterval("myClock.time()", 1000);
}
var myClock={
time:function(){
var dateObj= new Date();
var h = "0"+dateObj.getHours();
var m = "0"+dateObj.getMinutes();
var s = "0"+dateObj.getSeconds();
h = h.substring(h.length-2, h.length);
m = m.substring(m.length-2, m.length);
s = s.substring(s.length-2, s.length);
document.getElementById("jsaccesstime3").innerHTML = h+"時"+m+"分"+s+"秒";
}
}
/*=====================================================
//ボタンクリック時、時刻を表示（JS版）
======================================================*/
//※newしているためDateオブジェクトが増えていく
function timebtnonclick(){
var jstimebtn = document.getElementById('jsnowtimebtn');
var addspan = document.getElementById('jsaccesstime2');
jstimebtn.onclick = function(){
var dateObj= new Date();
var h = dateObj.getHours();
var m = dateObj.getMinutes();
var s = dateObj.getSeconds();
console.log(s);
addspan.innerHTML = h+"時"+m+"分"+s+"秒";
}
}
/*=====================================================
//ボタンクリック時、テキストボックスに時刻を表示（JS版）
======================================================*/
//※newしているためDateオブジェクトが増えていく
function timebtnonclicktextbox(){
var jstimebtn = document.getElementById('jsnowtimebtn4');
var addspan = document.getElementById('time');
jstimebtn.onclick = function(){
var dateObj= new Date();
var h = dateObj.getHours();
var m = dateObj.getMinutes();
var s = dateObj.getSeconds();
console.log(s);
addspan.value = h+"時"+m+"分"+s+"秒";
}
}
/*=====================================================
//テキストボックスの時刻を削除（JS版）
======================================================*/
//※newしているためDateオブジェクトが増えていく
function textboxreset(){
var jstimebtn = document.getElementById('jsnowtimereset');
jstimebtn.onclick = function(){
document.getElementById('time').value = "";
}
}
