サロゲートペアをJavaScriptでチェックする

2015年8月5日

サロゲートペアが含まれてるかをJavaScriptでチェックする方法を調べたときのメモ。

ユーザが入力した値にサロゲートペアが含まれていたらエラーとする要件がありましたが、どこでチェックするかに少し悩みました。画面が大量にありサーバ側でチェックするのはパフォーマンス的に不安でしたので、ブラウザ側でチェックすることにしました。

サンプルコード

/**
* TESTクラスの項目でサロゲートペアをチェックする。
*/
function setEvent() {
	$('.TEST').blur(function() {
		var object = $(this);
		if (chkSurrogatePair($(this).val())) {
			alert('入力にサロゲートペアが含まれています。');
			window.setTimeout(function() {
				object.focus();
				object.select();
			}, 1);
		}
	});
}

/**
* サロゲートペアが含まれているかをチェックする
* 検査対象文字が上位もしくは下位サロゲートであればtrueを返す
*/
function chkSurrogatePair(str) {

	for ( var i = 0; i < str.length; i++) {

		var c = str.charCodeAt(i);

		if ((0xD800 <= c && c <= 0xDBFF) || (0xDC00 <= c && c <= 0xDFFF)) { 
			return true; 
		}
	}
	return false;
}

/**

* TESTクラスの項目でサロゲートペアをチェックする。

function setEvent() {

$('.TEST').blur(function() {

var object = $(this);

if (chkSurrogatePair($(this).val())) {

alert('入力にサロゲートペアが含まれています。');

window.setTimeout(function() {

object.focus();

object.select();

}, 1);

}

});

}

/**

* サロゲートペアが含まれているかをチェックする

* 検査対象文字が上位もしくは下位サロゲートであればtrueを返す

function chkSurrogatePair(str) {

for ( var i = 0; i < str.length; i++) {

var c = str.charCodeAt(i);

if ((0xD800 <= c && c <= 0xDBFF) || (0xDC00 <= c && c <= 0xDFFF)) {

return true;

}

return false;

}

また、ブラウザ側でもタイミングには迷いましたが、今回は入力欄からフォーカスが外れた時にチェックして、修正するまでフォーカスが外れないようにしてみました。

サンプルコードでは、クラス名がTESTというHTML要素のblurイベントに一括でチェックのイベントをセットしています(^^)/

SE業務

IE11で開発者ツールが起動できない場合の対応

2015年6月28日

会社で貸与されているPCで、IEの開発者ツールがデフォルトでは起動できなかったので、その時の対応メモ。

現象

下図のように、メニューがグレーアウトされていたり、メニューから消されており、開発者ツールが起動できない。F12を押下しても同じく起動できない。

対応方法

上記のようなメニューの表示はレジストリで制御されているようなので、レジストリを変更する必要があります。レジストリを変更するためのregファイルは以下のサイトからダウンロード出来ます。
http://www.sevenforums.com/tutorials/152554-internet-explorer-f12-developer-tools-enable-disable.html

上記の画面で２つのファイルがダウンロード出来ます。

①「Enable_IE_F12_Developer_Tools.reg」　→　開発者ツールを有効化する

②「Disable_IE_F12_Developer_Tools.reg」　→　開発者ツールを無効化する

なので、開発者ツールを有効にするには①を実行します。実行すると↓のように開発者ツールが使用できるようになります。

※レジストリを変更するので要注意or自己責任でやりましょ～。(^▽^;)

SE業務

JavaScriptで子画面から親画面の関数を実行する

2015年6月8日

JavaScriptで子画面から親画面の関数をする方法です。

基本的に子画面から親画面を操作したい場合には、「window.opener」を使います。例えば、親画面のmyFunc()という関数を実行した場合には、子画面で「window.opener.myFunc()」と記述することで実行できます。

サンプルコード

親画面

<html>
<head>
<title>親画面</title>
<script>
var subWin = window.open("sub.html","subWin","width+320,height=240");
function myFunc()
{
	alert("親画面の関数実行！！");
}
</script>
</head>
<body>
親画面
</body>
</html>

<html>

<head>

var subWin = window.open("sub.html","subWin","width+320,height=240");

function myFunc()

{

alert("親画面の関数実行！！");

}

</script>

</head>

<body>

親画面

</body>

</html>

子画面

<html>
<head>
<title>子画面</title>
<script>
function call()
{
	window.opener.myFunc();
}
</script>
</head>
<body>
<form name="myform">
    <input type="button" value="親画面の関数実行" onClick="javascript:call();">
</form>
</body>
</html>

<html>

<head>

function call()

{

window.opener.myFunc();

}

</script>

</head>

<body>

</form>

</body>

</html>

子画面で「window.opener」により、親画面のwindowオブジェクトを取得しているイメージで、そのまま続けて「myFunc()」を記述して実行します。φ(.. )

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

メガネSEの仕事ノート

サロゲートペアをJavaScriptでチェックする

サンプルコード

IE11で開発者ツールが起動できない場合の対応

現象

対応方法

JavaScriptで子画面から親画面の関数を実行する

サンプルコード

親画面

子画面

日々のSE業務で得たノウハウと趣味