検索

カレンダー

2012年5月
月 火 水 木 金 土 日
« 4月    
 123456
78910111213
14151617181920
21222324252627
28293031  

広告

ブログランキング・にほんブログ村へ
にほんブログ村

東電電力供給情報

カテゴリー

最近のコメント

リンク

JavaScriptで入力フォームのマウス右クリック、コピー、ペーストを制御するには

投稿者：yasu　更新日時：2010年8月4日 10時40分40秒
カテゴリ：JavaScript

入力フォームの改修でメールアドレスの再入力項目を追加する事になりそうです。
できれば再入力項目なのでメールアドレスをコピー＆ペーストできないようにしたいところ。

そこでJavaScriptで制御できないか調べてみました。

PLAIN TEXT
HTML:
  3. <title>キーイベント</title>
  4. </head>
  7. マウス右クリック禁止、コピー禁止、ペースト禁止<br>
  8. <input type="text" oncontextmenu="return false;" oncopy="return false;" onpaste="return false;">
  9. </form>
  10. </body>
  11. </html>

inputタグに記載した
oncontextmenu="terurn false;" はマウスの右クリックを禁止します。
oncopy="return false;" はコピーを禁止します。
onpaste="return false;" はペーストを禁止します。

OS/Browser IE6 IE7 IE8 Firefox3.6 Safari4 Safari5 Google
Chrome5		 Opera10 Opera
Mini5
Windows XP ○ ○ ○ ○ ○ ○ ○ △ －
Windows Vista － ○ ○ ○ ○ ○ ○ △ －
Windows 7 － － ○ ○ ○ ○ ○ △ －
Mac OS X 10.6 － － － ○ ○ ○ ○ △ －
Ubuntu 10.04 － － － ○ － － ○ △ －
iOS4 － － － － × － － － ×
Android2.1(※1) － － － － × － － － ×

○・・・マウス右クリック禁止、コピー禁止、ペースト禁止全て制御可能
△・・・マウス右クリック禁止、コピー禁止、ペースト禁止一部制御可能
×・・・マウス右クリック禁止、コピー禁止、ペースト禁止全て制御不可
※1・・・Android2.1に標準インストールされているブラウザはSafariと同じWebKitベースなのでSafariの欄に制御状況を記載

PCのIE、Firefox、Safari、Google Chromeは制御可能でOperaはマウス右クリックだけ制御可能でした。
またiOSやAndroidのSafari、Opera Miniはコピー・ペーストとも制御不可でした(タッチパネルの為、右クリックはイベント制御不可)。

JSONPを試してみる

投稿者：yasu　更新日時：2009年10月17日 22時39分41秒
カテゴリ：JavaScript, PHP

JSONPを試してみました。
JSONPとは - はてなキーワード

まずサーバー側の実装をPHPで作ります。
QueryStringのp1とp2を足し算して答えを返すプログラムです。
jsonp.php

callback(0);

ポイントは最後の「echo "callback($ret);";」です。
クライアントのJavaScriptからjsonp.phpを呼び出すので返り値「"callback($ret);";」をJavaScriptで解釈できるようにしてあげます。

次にクライアント側の実装をHTMLとJavaScriptで実装します。
テキストボックスを2つ作って答えボタンをクリックすると答えボタンの下のspanタグに答えを返すようにします。
jsonp.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>jsonpのテスト</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="content-type" content="text/html; charset=Shift-JIS">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<script type="text/javascript" src="jsonp.js"></script>
</head>
<body>
	<form action="#" method="get">
		<p><input id="p1" type="text"></p>
		<p><input id="p2" type="text"></p>
		<p><input id="retAnswer" type="button" value="答え" onclick="calljsonp()"></p>
	</form>
	<span id="answer"></span>
</body>
</html>

jsonp.js

function callback(val) {
	document.getElementById("answer").innerHTML = val;
}

function calljsonp() {
	var script = document.createElement('script');
	var p1 = document.getElementById('p1').value;
	var p2 = document.getElementById('p2').value;

	script.type = "text/javascript";
	script.charset = "UTF-8";
	script.src = 'jsonp.php?p1=' + p1 + '&amp;amp;amp;p2=' + p2;
	document.body.appendChild(script);
}

calljsonp関数でサーバー側のPHPを呼び出します。
例えば1と2を入力して答えボタンを押した場合、「"callback(3);";」という文字列がクライアントに返ってきます。
するとJavaScriptとして解釈されるのでcallback関数が動き出します。
callback関数は引数として受け取った3をspanタグにセットしています。

ということで結果はこちら。
スクリーンショット（2009-10-16 22.50.28）

background-colorとbackgroundColor

投稿者：yasu　更新日時：2009年10月7日 21時12分33秒
カテゴリ：CSS, JavaScript

CSSで背景色を設定するときは「background-color」で設定可能です。

div {
    background-color: #000000:
}

でもJavaScriptで背景色を設定する場合は「backgroundColor」で設定可能です。

    document.getElementById("divタグのid").style.backgroundColor = "#000000";

最初JavaScriptで

    document.getElementById("divタグのid").style. background-color = "#000000";

って書いても背景色が変わらなかった。

JavaScriptで数値をランダムに発番(Math.random())

投稿者：yasu　更新日時：2009年10月5日 22時42分52秒
カテゴリ：JavaScript

JavaScriptで数値(この例では0から9)をランダムに発番するプログラムを書いてみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ランダム関数</title>
</head>
<body>
<script type="text/javascript">
<!--
	var MAXNUM = 10;
	var CurNUM;
	var t = new Array(MAXNUM - 1);
	var breakFlg;

	for (i=0; i<maxnum; i++) {
		t[i] = 0;
	}
	for (;;) {
		CurNUM = Math.floor(Math.random() * MAXNUM);
		for (;;) {
			if (t[CurNUM] == 0) {
				t[CurNUM] = 1;
				document.write(CurNUM + "<br />");
				break;
			} else {
				CurNUM += 1;
				if (CurNUM >= MAXNUM) {
					CurNUM = 0;
				}
			}
		}

		breakFlg = 1;
		for (i=0; i<maxnum; i++) {
			if (t[i] == 0) {
				breakFlg = 0;
				break;
			}
		}
		if (breakFlg == 1) break;
	}
//-->
</script>
</body>
</html>

まず18行目の「Math.random()」ですが0以上1未満のランダムな浮動小数点を返します。
これに発番したい範囲のMAXの数値を掛け合わせた数値を「Math.floor()」の引数に渡すことで小数点以下の数値を切り捨てた数値を返してくれます。

19行目〜30行目で1度発番した数値にフラグを立てて同じ数値を2度発番しないようチェックしています。また同じ数値を発番した場合は+1して同じ数値を発番していないかチェックしています。

32行目〜39行目は全部の数値を発番したかチェックしています。

こういったユニークにランダムな数値を発番するロジックってどうするのが正解なんですかね？

正しい結果は得られましたが、0
から10万とか100万になっても数秒で実行できるロジックにしたいです。
もう少し調べてみようかと思います。