SQLの窓

2016年07月08日


HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )

このサンプルでは、required 属性と pattern 属性でのエラー結果のメッセージをカスタマイズしています。また、JavaScript のイベント部分の登録には jQuery を使用しています。

validity の下には以下のようなプロパティがあり(Google Chrome 調べ)、個別に対応が可能なようです。
badInput
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
tooShort
typeMismatch
valid
valueMissing
※ 実践しないと詳細は解りませんが、だいたいの意味は MDN で日本語で書かれています。
customError だけは特殊なプロパティのようで、invalid イベントの中で、setCustomValidity を実行して空文字以外を指定していると true になるようです。
しかも、実行順序とか関係無く、記述されていると invalid の中ではそうなっていました
▼ 何もカスタマイズしないで、デフォルトエラー発生後、コンソールで確認したものです。 required 属性の場合は、未入力だと valueMissing になり、pattern の対象外だと、patternMismatch になりました。詳細は未調査ですが、思ったような対応はおそらく可能だと思います。 ▼ 参考にした Stack Overflow HTML5 form required attribute. Set custom validation message? Stack Overflow でも書かれていますが、oninput での処理が重要となります。(そもそも、この手の validate 処理は、業務アプリでは重要になります。やっと、HTML でそれがサポートされるようにはなりましたが、結果的には JavaScript の力を借りる事は避けられないようです。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
			}
		})
		.on("input",function(){
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>
oninput で setCustomValidity("") でカスタムメッセージをクリアしているのは、例えば、required だけメッセージを変更していた場合、setCustomValidity("") でクリアしなければ、pattern のエラーになっているにもかかわらず 『必須入力です』 と表示されてしまいます。

そこで、setCustomValidity("") でクリアだけ実行すると、 『必須入力です』 というメッセージが表示されている状態のままで数字以外を入力すると、 『デフォルトのpattern のエラーメッセージ』 が表示されますい。これが、required のカスタマイズだけなら正しいのですが、pattern のメッセージもカスタマイズしている場合に新しいメッセージに切り替わりません。

そこで、いったんフォーカスを外して現在の表示をキャンセルして setCustomValidity("") でカスタムメッセージをクリアして、フォーカスを戻すという処理を行っています
textarea で pattern 属性は使用できません ( MDN のドキュメント ) 関連する記事 HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
タグ:jquery HTML5
posted by lightbox at 2016-07-08 13:39 | JavaScript | このブログの読者になる | 更新情報をチェックする

2015年08月01日


テーブルのセルをクリックして背景色を rgb(0,0,0) から #000000 の変換で、eval を使う事の考察

ちょっとした文字列処理でいろいろな解法があると思うのですが、eval 使うと一番簡単に作れると思います。rgb と言う関数を用意しておいて、eval( "rgb(0,0,0)" ) で rgb 関数の戻り値が eval メソッドの戻り値として返って来ます。もし、rgb という関数名にはちょっと違和感感じるのであれば、"rgb(0,0,0)".replace("rgb","関数名") で関数名は好きにできます。

ですが、無条件に eval 使うのはあまり良く無いので、引数部分だけ取り出して eval してみました。引数部分ならば、処理は必ず自分の関数内で行われるので、問題を排除するのは容易だと思います。

ただ、ここまでするのであれば、eval を使う意味もあまり無いのも事実ですが、処理分割がとてもはっきりされた上に、やっている事の内容が解りやすいコードになったと思います。

1) 正規表現で、rgb( n,n,n ) の引数部分である "n,n,n" を取得
2) 新たに関数部分を付加して eval で実行
3) 処理関数( a, b, c ) で個別の処理を記述する

3) は、いきなり eval で使える関数です
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function __myrgb1(a){
	var str  = "__myrgb2("+a+")";
	return eval(str);
}
function __myrgb2(a,b,c){
	return	"#"+(
		((a<16)?"0":"")+
		a.toString(16)+
		((b<16)?"0":"")+
		b.toString(16)+
		((c<16)?"0":"")+
		c.toString(16)
	).toUpperCase();
}
$(function(){
	$("td").click(function(){
		a = $(this).css("background-color");
		a.match(/rgb\((.+?)\)/);
		alert( __myrgb1(RegExp.$1) );

	});
});
</script>



white black whitesmoke yellowgreen
aliceblue antiquewhite aqua aquamarine
azure beige bisque yellow
blanchedalmond blue blueviolet brown
burlywood cadetblue chartreuse chocolate
coral cornflower cornsilk crimson
cyan darkblue darkcyan darkgoldenrod
darkgray darkgreen darkkhaki darkmagenta
darkolivegreen darkorange darkorchid darkred
darksalmon darkseagreen darkslateblue darkslategray
darkturquoise darkviolet deeppink deepskyblue
dimgray dodgerblue firebrick floralwhite
forestgreen fuchia gainsboro ghostwhite
gold goldenrod gray green
greenyellow honeydew hotpink indianred
indigo ivory khaki lavender
lavenderblush lawngreen lemonchiffon lightblue
lightcoral lightcyan lightgoldenrodyellow lightgreen
lightgrey lightpink lightsalmon lightseagreen
lightskyblue lightslategray lightsteelblue lightyellow
lime limegreen linen magenta
maroon mediumaquamarine mediumblue mediumorchid
mediumpurple mediumseagreen mediumslateblue mediumspringgreen
mediumturquoise mediumvioletred midnightblue mintcream
mistyrose moccasin navajowhite navy
oldlace olive olivedrab orange
orangered orchid palegoldenrod palegreen
paleturquoise palevioletred papayawhip peachpuff
peru pink plum powderblue
purple red rosybrown royalblue
saddlebrown salmon sandybrown seagreen
seashell sienna silver skyblue
slateblue slategray snow springgreen
steelblue tan teal thistle
tomato turquoise violet wheat


posted by lightbox at 2015-08-01 19:11 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年10月27日


JavaScript & VBScript : ブラウザから Windows の OS のバージョンを判定

Windows では IE だけで無く、HTA(mshta.exe) や オブジェクト(InternetExplorer.Application)経由でこの方法を利用する事ができます。

VBS ボタンは、IE11 のエミュレーションで IE10 以前に変更すると動作します。IE11 のまま動作させるには、HTML 側で事前に対処する必要があります。



IE11 で VBScript を使う場合の注意事項 ( 古い社内アプリ移行時必見 )
<script type="text/javascript">
// ***********************************************
// Windows 環境での OS チェック
// ***********************************************
function checkOS() {
	if ( (window.navigator.userAgent).indexOf( "NT 5.0" ) != -1 ) {
		alert("Windows2000")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 5.1" ) != -1 ) {
		alert("WindowsXP")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.0" ) != -1 ) {
		alert("WindowsVista")
	}
	if ( (window.navigator.userAgent).indexOf( "NT 6.1" ) != -1 ) {
		alert("Windows7")
	}
}
</script>
<input type="button" value="JS" onClick="checkOS()">



<script type="text/vbscript">
' ***********************************************
' IE11 のエミレータで IE10 以前で動作します
' ***********************************************
Function checkOS() 
	if instr( window.navigator.userAgent & "", "NT 5.0" ) <> 0 then
		alert("Windows2000")
	end if
	if instr( window.navigator.userAgent & "", "NT 5.1" ) <> 0 then
		alert("WindowsXP")
	end if
	if instr( window.navigator.userAgent & "", "NT 6.0" ) <> 0 then
		alert("WindowsVista")
	end if
	if instr( window.navigator.userAgent & "", "NT 6.1" ) <> 0 then
		alert("Windows7")
	end if
End Function
</script>

<input type="button" value="VBS" onClick="Call checkOS" language="VBScript">

初回投稿 : 2009-10-02


posted by lightbox at 2014-10-27 23:44 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年09月27日


Firefox、IE11 の canvas で動作する楕円( ellipse )関数

ellipse 関数は、Google Chrome で動作しますが、現時点で Firefox と IE11 で動作してなかったので、計算で Google Chrome の ellipse をエミュレートしました。
<style type="text/css">
#circle {
	border: solid 1px #000000;
}
</style>

<canvas id="circle"></canvas>

<script type="text/javascript">
	var canvas = document.getElementById("circle");
	canvas.width = 300;
	canvas.height = 300;
	var draw = canvas.getContext("2d");

	draw.beginPath();
	draw.fillStyle = "#c0c0c0";

	ellipse( draw, 80, 50, 100, 85, 0, Math.PI*2, false);
	draw.fill();
	draw.lineWidth = 3;
	draw.stroke();

// *********************************
// 楕円関数
// *********************************
function ellipse( obj, x, y, a, b, o1, o2, o3 ) {
	draw.save();
	draw.scale( 1, b / a );
	draw.arc(x, y+((a-b)+((y-a)-(y-a)*(b/a)))*(a/b), a, o1, o2, o3);
	draw.restore();

}
</script>
save と restore は、伸縮する楕円の枠線の太さが変わらないようにする処理です。計算は、scale による伸縮による座標の移動を逆計算したものです。


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

2014年04月02日


文字列を UTF-8(2バイト以上) で表現した時の 16進数表現の文字列を取得する

 という文字を UTF-8 で保存して、コードをダンプすると以下のようになります
          0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F
------------------------------------------------------------
00000000 E3 81 82                                         縺
つまり、目的は "E38182" という文字列を取得する事です。この場合は、encodeURIComponent を使うと、% が付加されますが、殆どの文字は正しく変換されます。中に仕様上若干変換されませんが、UTF-8 で、2バイト以上の文字の開始バイトは、Cx,Dx,Ex,Fxで、2バイト目は 8x,9x,Ax,Bx なので以下のように書けます
<script type="text/javascript">
function toUtf8Code(str) {
	var _x = encodeURIComponent(str);
	_x = _x.replace(/%/g,"");
	return _x;
}
</script>
<input type="text" id="target_string">
<input type="button" value="変換" onclick='alert(toUtf8Code(document.getElementById("target_string").value))'>

関連する記事

posted by lightbox at 2014-04-02 13:46 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年03月20日


ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする

Google では、有名な JavaScript ライブラリは、バージョン別にホスティングされています。当然、jQuery もあるので普通に使っています。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
普通のページでは、ページのヘッダに jQuery の読込みは終わっているという事を想定し、その場合はそちらを使うようになっています。もし、そのページで、その記事より前に jQuery が読み込まれていない場合のみ、この処理が実行されます。

その場合も、IE の環境では、バージョンによってうまく動かない事があったので、window.addEventListener があるか無いかで対象バージョンを分けています。その際の URL も、window[window.location.hostname+'.loadjQuery'] の内容を使っているので、この記事より前に意図的に URL を変更する事によって、そのバージョンの jQuery を使用できるようにしています。( 特定のバージョンで処理した場合を想定しています )



posted by lightbox at 2014-03-20 11:05 | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり