2014年09月19日

Google Chrome のデベロッパーツールで要素の追加をリアルタイムで表示テストする

▼ クリックすると、GIF アニメーション画像が画面中央に大きく表示されます

( 最初の停止は 6秒で、途中の文字説明は4秒停止します。最後6秒停止して元へ戻ります )

Google Chrome のデベロッパーツールを F12 で開いて、このブログのメニューの追加をテストしています。メニューは LI要素が一つの単位なので、既存のメニューユニットをクリップボードにコピーしてから、編集モードに移行して今あるメニューの後ろに一つ追加し、テキスト表示を変更してうまく表示されるかをテストしています。




▼ 編集モード



Google Chrome のデベロッパーツールでは、このような大きなエディタを開かなくても、属性を直接ダブルクリックすれば、編集可能な状態になります。

また、そのような状態で属性全体を全てクリアすると、属性単位で削除する事も可能です。以下は、属性側をダブルクリックしたので、属性が選択されて編集可能になっています。



値をダブルクリックすると、値が選択されます。但し、属性の値が URL の場合はクリックするとウインドウを開いてしまうので、属性を選択してからカーソルを移動させるか、前述の大きなエディタを使うといいと思います。



タグ:Google Chrome
posted by at 2014-09-19 13:09 | ブラウザ | このブログの読者になる | 更新情報をチェックする

2014年09月18日

HTML5 の input 要素の type 属性に range を指定すると、スライダーになります ( Chrome と Firefox と IE11 )

HTML5 の input 要素の拡張は、IE11 ではかなり遅れているというか控えめなのですが、何故か気合が入っているのが、type=range を使ったいわゆる『スライダー』コントロールです



ある範囲を指定する為のコントロールなので、min、max、step 属性が併用できます。何も指定しなければ、min="0" max="100" step="1" を指定した事になります。

両端の値は残念ながら表示される事は無く、スライダーを動かした時の値が表示されるのは、IE11 のみで、そのままでは Chrome や Firefox でリアルタイムに値を知る事ができません。

そこで、もう一つフィールドを追加してスライダーの onmousemove イベントで値をセットしてみました。

▼ 実際の実行


<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="range"
		name="userid"
		onmousemove='document.getElementById("userid2").value=this.value;'>
	<br>
	<input type="number"
		name="userid2"
		id="userid2">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>



posted by at 2014-09-18 23:54 | HTML | このブログの読者になる | 更新情報をチェックする

input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性

結論から言うと、Google Chrome と Firefox と IE11 でこの機能が使用できます。さらに、pattern 属性と併用して、入力する値にも制限を加える事ができます。

これだけで十分に有用で、WEB アプリケーションで今まで欲しかった機能( JavaScript で実装していた機能 )が誰でも input に datalist 属性の中にセットした コンボボックスで今まで利用して来た仕様と同じ option セットを関係付けるだけで利用可能になります。

Google Chtome

Google Chrome はとても優秀です。Google Chrome のみ完全にコンボボックスと同等の機能を有しており、value と text を同時表示する機能に加え、pattern で指定した文字に該当しない場合は、一覧から排除してくれます。( pattern そのものの検査 は、Firefox と IE11 でも機能しています。排除してくれるのは Chrome のみです )



これには本当に驚きで、総じて HTML5 における input 要素の拡張に関しては全てにおいて一歩先を行っています。

Firefox

Firefox のこの機能は微妙です。実装にあたって、入力の履歴と同じリソースを使って実現しているので、過去の入力値と、リストが同時に表示されるという不便な状況になっており、削除するにはキャッシュの削除と同等の手間が必要です。



IE11

IE11 は、Firefox に比べてかなりマシです。空の場合のみクリックすると、常にリストが表示されて選択可能ですが、値が入っている場合は、やはりリストが出ないので修正時の意味がありません。

ただ、Firefox に比べ、値がある場合は x のクリアコントロールが表示されるので、ひと手間楽です。




▼ 実際の実行



<datalist id="kansai1">
<option value="1">大阪</option>
<option value="2">京都</option>
<option value="3">兵庫</option>
<option value="4">滋賀</option>
<option value="5">奈良</option>
<option value="6">和歌山</option>
</datalist>
<datalist id="kansai2">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
</datalist>
<datalist id="kansai3">
<option value="大阪"></option>
<option value="京都"></option>
<option value="兵庫"></option>
<option value="滋賀"></option>
<option value="奈良"></option>
<option value="和歌山"></option>
</datalist>

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="text"
		list="kansai1"
		pattern="^[1-5]+$"
		name="userid1">
	<br>
	<input type="text"
		pattern="^[1-5]+$"
		list="kansai2"
		name="userid2">
	<br>
	<input type="text"
		list="kansai3"
		name="userid3">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

関連する記事

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。





posted by at 2014-09-18 16:31 | HTML | このブログの読者になる | 更新情報をチェックする

2014年09月17日

HTML5 の input 要素を number タイプにすると、min、max、step 属性で、spinner を利用できます( Chrome と Firefox。IE11 は内容の検査のみ )

jQuery UI では、spinner と呼ばれるコントロールですが、type 属性に number を指定する事によって同様のコントロールになります(Chrome と Firefox )。min 属性と max 属性をさらに指定すると、最小値(min)最大値(max)の間を( step を指定しなければ 1 づつ )増やしたり減らしたりするコントロールが、フィールドの右横に実装されます。

増減値は、step 属性で指定できるので、汎用性も高いです。

Google Chrome



フィールド右横のコントロールは、マウスカーソルを近づけるか、フォーカスが入力フィールドにある時( つまりアクティブな時 ) だけ表示されます。

ただ、最大値と最小値の値の都合で、増分 2 にした場合、奇数だけになったり、偶数だけになったりしてちょっと問題はあります。

その際、コントロールで変更しようとすると、奇数か偶数に飛びます。入力した値で送信しようとすると以下のようなエラーになります




Firefox



Google Chrome と同様で、奇数だけになったり、偶数だけになったりした上、奇数とコントロールが決めた時に、偶数値を入力すると、コントロールが動作せずに値が変わらず枠が赤くなってエラー扱いになっています。



IE11

IE11 では、値変更用のコントロールが無い事をのぞいて、属性による検査の仕様は同等です。




▼ 実際の実行
▼ 奇数扱いになっています

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="number"
		name="userid"
		value=""
		step="2"
		min="-1"
		max="5">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>



posted by at 2014-09-17 15:56 | HTML | このブログの読者になる | 更新情報をチェックする

2014年09月14日

JavaScript : 正規表現を使った、一般的な入力文字列の検査







入力文字列の検査が目的なので、window オフジェクトの下にプロパティを作成して、その中に複数のメソッドを定義しています。引数は、JavaScript で、入力フィールドの検査をする事を想定しているので、文字列を取り出す処理は、メソッド内に委ねる為に id 渡しとしています。

簡単な正規表現の利用

ここで使われている正規表現は、基礎なものしか使用していません。しかし、これを理解すればもう少し複雑な正規表現を読み解く事が容易になります。

1) ^ … $

これは、最初と最後を示します。限定された入力という範囲を明確にしています。

2) .

任意の文字です。( 一つの文字です )

3) +

直前の文字が一つ以上続く文字列を意味します

4) \

エスケープ文字です。正規表現で使われる特殊な文字を、通常の文字として使いたい場合に前に付けます

5) []

その中で指定された文字種( グループ )を、一つの文字として考えます。
[0-9]+ とすれば、数字文字が、一つ以上連続している文字列になります。

5) {}

直前の文字が何文字なのかを指定するもので、{1,2} として2通り指定する事も可能です

日付チェック

正規表現では、フォーマットのチェックしかできないので、日付が日付として正しいかどうかをさらにチェックしています。
<script type="text/javascript">
window["_c"] = { 
	"isMail": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^.+@.+\..+$/) != null );
	},
	"isSuji": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^[0-9]+$/) != null );
	},
	"isEiji": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^[a-zA-Z]+$/) != null );
	},
	"isEisuji": function(id) {
		var str = document.getElementById(id).value;
		return ( str.match(/^[a-zA-Z0-9]+$/) != null );
	},
	"isDate": function(id) {
		var str = document.getElementById(id).value;
		if ( str.match(/^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$/) != null ) {
			var parts = str.split( "/" );
			var nYear = Number(parts[0]); 
			var nMonth = Number(parts[1]) - 1;
			var nDay = Number(parts[2]);
			// 月,日の妥当性チェック 
			if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) { 
				var dt = new Date(nYear, nMonth, nDay); 
				if( isNaN(dt) ) { 
					return false; 
				}
				else if(
					dt.getFullYear() == nYear &&
					dt.getMonth() == nMonth &&
					dt.getDate() == nDay ) {
					return true;
				}
				else{ 
					return false;
				}
			}
			else{ 
				return false;
			}
		}
	}
}
</script>

<input type="text"
	id="check_target" >
<br>
<input type="button"
	value="isMail"
	onclick='
		if ( !_c.isMail("check_target") ) {
			alert("メールアドレスではありません");
		}
	'>

<input type="button"
	value="isSuji"
	onclick='
		if ( !_c.isSuji("check_target") ) {
			alert("半角の数字ではありません");
		}
	'>

<input type="button"
	value="isEiji"
	onclick='
		if ( !_c.isEiji("check_target") ) {
			alert("半角の英字ではありません");
		}
	'>

<input type="button"
	value="isEisuji"
	onclick='
		if ( !_c.isEisuji("check_target") ) {
			alert("半角の英数字ではありません");
		}
	'>

<input type="button"
	value="日付のフォーマットと論理チェック"
	onclick='
		if ( !_c.isDate("check_target") ) {
			alert("日付として要求する内容に合っていません");
		}
	'>



posted by at 2014-09-14 00:56 | JavaScript | このブログの読者になる | 更新情報をチェックする