入力フォームのCAPS LOCKがONになっているかを表示「capsChecker」
当ページのリンクには広告が含まれています。
スポンサーリンク
入力フォームで「CAPS LOCK」がONになっているかどうかを表示するプラグイン「capsChecker」を紹介します。
jQueryプラグイン「capsChecker」
このプラグインを使えば、フォームで入力する際に「CAPS LOCK」がONになっているかどうかを表示させることができます。
「CAPS LOCK」をONにして入力しすると「CAPS」というテキストが表示され、OFFだと表示されません。
ユーザーの誤入力を防ぐのに便利なプラグインですね。
スポンサーリンク
それではデモページの入力フォームに「CAPS LOCK」のON/OFFを切り替えながら入力してみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>capsChecker - jQueryプラグイン</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.capsChecker.min.js"></script>
<script>
$(function() {
function onCaps(e, on) {
if(on)
$('#pnlIndicator').addClass('on')
else
$('#pnlIndicator').removeClass('on')
}
$('#txtTest').capsChecker({ capson: onCaps, capsoff: onCaps });
});
</script>
<style>
.input {
position: relative;
width: 280px;
height: 50px;
}
input {
border: 1px solid #ccc;
padding: 15px;
outline: none;
font-size: 16px;
height: 20px;
color: #777;
margin: 0;
width: 250px;
max-width: 100%;
display: block;
background: #fff;
}
.indicator {
height: 20px;
width: 40px;
text-align: center;
position: absolute;
right: 5px;
top: 5px;
background: red;
color: #fff;
padding: 10px 5px;
display: none;
}
.indicator.on { display: block }
</style>
</head>
<body>
<h1>capsChecker のデモでーす。</h1>
<p>「CapsLock」をオン/オフにして、以下のフォームを入力してみてください。</p>
<div class="input">
<input id="txtTest" type="text" />
<div id="pnlIndicator" class="indicator">CAPS</div>
</div>
</body>
</html>
スポンサーリンク