info

Home
[HTML5]input  @ HTML5 2015年3月4日
input
HTML5で追加されたtype
  • search
  • tel
  • url
  • email
  • date
  • month
  • week
  • time
  • number
  • range
  • color

サンプル

見た目(pc firefox)
sc01

見た目(iOS7.1.1)
sc00

iOS7.1.1での入力時のキーボード
search
00search

tel
01tel

url
02urle 02url

email
03email

date
04date

month
05month

week
使用不可

time
06time

number
07number 07numberj

range
キーボードは出現しない

color
使用不可
08color

[JavaScript]フォームの値を動的に取得する  @ JavaScript 2015年2月27日
フォームの値を動的に取得する
全角入力で入力確定前でも
IE8対応

サンプル


html
<div>
	<form name="sampleForm" action="" method="post">
		<input type="text" name="ps" value="" style="width:300px;">
	</form>
	<div id="result"></div>
</div>

js
(function(){
	function addEvent(element, type, listener, flg) {
	    if (!element || typeof(element) == "undefined") {
	        return
	    }
	    if (element.addEventListener) {
	        element.addEventListener(type, listener, flg);
	    } else {
	        element.attachEvent('on' + type, function() {
	            listener.call(element, window.event);
	        });
	    }
	}
	function init(){
		addEvent(document.sampleForm.ps, ('oninput' in window) ? 'input':'propertychange', function(e){
			document.getElementById('result').innerHTML = document.sampleForm.ps.value;
		}, true);
		addEvent(document.sampleForm, 'submit', function(e){
			e.preventDefault();
		});
	}

	addEvent(window,'load',function(){
		init();
	},true);
})();

[JavaScript]ページのロードが終わったらgifアニメーションをスタートさせる  @ JavaScript , jQuery 2014年11月21日
ページのロードが終わったらgifアニメーションをスタートさせる

画像は2つ用意しておく

アニメーションgifの最初の状態のpng



アニメーションgif(ループしない)


サンプル
//execute when all things loaded
$(window).load(function(){
	var image = new Image();
	image.src = "gif.gif?"+(new Date()).getTime();
	$(image).load(function(){
		$('#main-kv').hide();
		$('#main-kv').parent().append(image);
	});
});