ロックを解除しないと送信不可能にするJavaScript「slideLock」

近年スパム防止のためフォームにCAPTCHA（キャプチャ）と呼ばれる仕組みを導入しているケースが多く見られます。
これ読みにくい英数字なので、本当に読めない場合がありイラッとすることもあります。
JavaScriptライブラリの大御所jQueryのプラグインslideLockを利用するとロックを解除するだけなので、ユーザーフレンドリーになります。

使用方法

slideLock Demoのファイルダウンロードが404なので、jslideLock.zipからダウンロードして下さい。
またjQuery UIの1.7+slider pluginが必要となります。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.js"></script>
<script type="text/javascript" src="jquery.slideLock.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#id名").slideLock({
		labelText: "ラベルテキスト",
		noteText: "注意書きテキスト",
		lockText: "ロック中のテキスト",
		unlockText: "ロック解除時のテキスト",
		iconURL: "arrow_right.png",
		onCSS: "#333", //ロックにマウスオーバーしている時の色
		offCSS: "#aaa",//ロックにマウスアウトしている時の色
		inputValue: 1,
		saltValue: 9,
		checkValue: 10,
		submitID: "#submit" //submitボタンのid名
	});
});
</script>

次にform部分を記述していきます。


<form action="" method="post" id="id名">
	<p><label for="name">名前:</label>
		<input type="text" name="name" id="name" value="" /></p>
	<p><label for="email">E-mail:</label>
		<input type="text" name="email" id="email" value="" /></p>
	<p><label for="comments">Comments:</label>
		<textarea name="comments" id="comments"></textarea></p>
	<input type="submit" name="submit" id="submit" value="送信" />
</form>

最後にCSSを記述します。


<style type="text/css">	
.ui-slider { position: relative; text-align: left; display: block; margin: 10px 0 10px 0px; width: 155px; }
.ui-slider-handle { position: absolute; z-index: 2; width: 16px; height: 16px; cursor: pointer; background: #333; top: -4px; margin-left: -8px; border: 1px solid #784807; }
.ui-slider-horizontal { height: 10px; background: #ddd; border: 1px solid #ccc; }
.ui-slider-handle:hover, .ui-state-hover, .ui-state-focus, .ui-state-active { background: #aaa; }
	
/* CSS3 ---------------------------------------------------- */
.ui-slider-handle { 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: -moz-linear-gradient(top, #f60, #930);
	background: -webkit-gradient(linear, left top, left bottom, from(#f60), to(#930));
}
.ui-slider-horizontal { 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: -moz-linear-gradient(left, #fff, #ddd);
	background: -webkit-gradient(linear, left top, right top, from(#fff), to(#ddd));
}
a.ui-state-hover, a.ui-state-focus { 
	background: -moz-linear-gradient(top, #666, #333);
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	box-shadow: 0px 0px 10px #f60;
	-moz-box-shadow: 0px 0px 10px #f60;
	-webkit-box-shadow: 0px 0px 10px #f60;
}
a.ui-state-active { 
	background: -moz-linear-gradient(top, #ddd, #aaa);
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
}
</style>

CSS3便利ですね。
これでスパムが減るかと言われたら謎ですが、見た目は面白いですね。

サンプル

Javascriptサンプルページ一覧

skuare.net