表示されている図形を一筆書きでなぞってください

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.motionCaptcha.0.2.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.motionCaptcha.0.2.js"></script>
<script>
	$(window).load(function(){
		$('#MotionCAPTCHADemo-form').motionCaptcha({
			shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
		});
		$('#MotionCAPTCHADemo-form input[type="submit"]').on('click', function(){
			alert('認証成功!');
			return false;
		});
	});
</script>
<form action="#" method="post" id="MotionCAPTCHADemo-form">
	<p><input class="placeholder" type="text" placeholder="名前"></p>
	<p><input class="placeholder" type="email" placeholder="メールアドレス"></p>
	<p><textarea class="placeholder" placeholder="メッセージ" cols="" rows="3"></textarea></p>
	
	<div id="mc">
		<p>表示されている図形を一筆書きでなぞってください</p>
		<canvas id="mc-canvas"></canvas>
	</div>
	
	<p class="submit"><input disabled="disabled" autocomplete="false" type="submit" value="Submit"></p>	
</form>

MotionCAPTCHAについて

MotionCAPTCHAは、よくある認証とは一味違うモーションで認証するプラグインです。
表示された図形通りになぞると認証されるというなかなかインタラクティブな認証です。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン