「JavaScript」タグアーカイブ

サロゲートペアを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業務

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()」を記述して実行します。φ(.. )

SE業務

FirefoxでIME起動中はkeyupイベントが発生しない

2015年4月12日

少し前に仕事で調べたのでメモ。

keyupイベントをキャッチして処理するJavaScriptのプログラムを開発していたのですが、Firefoxでうまく動作しませんでした。調べて見たところ、IME起動中（日本語変換中とか）には、Firefoxではkeyupイベントが発生しません。

$("#target").keyup(function() {
  alert("Handler for .keyup() called.");
});

$("#target").keyup(function() {

alert("Handler for .keyup() called.");

});

こちらのサイトで「日本語入力時に発生するキーイベントのテスト」ができます。

確認してみると、IEやChromeはIME起動中でもkeyupイベントが発生するのですが、Firefoxだけ発生しません。こういうのは揃えてほしい。

FirefoxのBugzzilaにもバグ？として報告されているので、いつかは治るかも（￣ー￣?）
https://bugzilla.mozilla.org/show_bug.cgi?id=354358

月	火	水	木	金	土	日
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

メガネSEの仕事ノート

「JavaScript」タグアーカイブ

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

サンプルコード

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

サンプルコード

親画面

子画面

FirefoxでIME起動中はkeyupイベントが発生しない

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