jQueryを使用してCapsLockキーのオン/オフを検出するにはどうすればよいですか？パスワードを持っていますがtextbox、小文字のみを許可しているため、CapsLockキーをオンにしたくありません。
jQueryを使用してCapsLockキーの状態を検出することは可能ですか？
46743 次
6 に答える
30
Javascript で Caps Lock を検出する方法。
function capLock(e){
var kc = e.keyCode ? e.keyCode : e.which;
var sk = e.shiftKey ? e.shiftKey : kc === 16;
var visibility = ((kc >= 65 && kc <= 90) && !sk) ||
((kc >= 97 && kc <= 122) && sk) ? 'visible' : 'hidden';
document.getElementById('divMayus').style.visibility = visibility
}
次に、パスワード フォームの場合:
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
于 2010-02-22T05:02:49.187 に答える
14
特定のフィールドだけでなく、ページ全体のキャップス ロック キーの状態を監視するcapslockstate と呼ばれる jQuery プラグインがあります。
Caps Lock キーの状態を照会するか、状態の変化に反応するイベント リスナーを定義できます。
このプラグインは、英語以外のキーボードでの作業、Caps Lock キー自体の使用の監視、アルファベット以外の文字が入力された場合に状態を忘れないなど、ここでの他の提案よりも検出と状態管理の優れた仕事をします.
2 つのデモがあり、1 つは基本的なイベント バインディングを示し、もう1 つはパスワード フィールドにフォーカスがある場合にのみ警告を示します。
例えば
$(document).ready(function() {
/*
* Bind to capslockstate events and update display based on state
*/
$(window).bind("capsOn", function(event) {
$("#statetext").html("on");
});
$(window).bind("capsOff", function(event) {
$("#statetext").html("off");
});
$(window).bind("capsUnknown", function(event) {
$("#statetext").html("unknown");
});
/*
* Additional event notifying there has been a change, but not the state
*/
$(window).bind("capsChanged", function(event) {
$("#changetext").html("changed").show().fadeOut();
});
/*
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();
// Call the "state" method to retreive the state at page load
var initialState = $(window).capslockstate("state");
$("#statetext").html(initialState);
});
と
$(document).ready(function() {
/*
* Bind to capslockstate events and update display based on state
*/
$(window).bind("capsOn", function(event) {
if ($("#Passwd:focus").length > 0) {
$("#capsWarning").show();
}
});
$(window).bind("capsOff capsUnknown", function(event) {
$("#capsWarning").hide();
});
$("#Passwd").bind("focusout", function(event) {
$("#capsWarning").hide();
});
$("#Passwd").bind("focusin", function(event) {
if ($(window).capslockstate("state") === true) {
$("#capsWarning").show();
}
});
/*
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();
});
プラグインのコードはGitHub で表示できます。
于 2013-01-07T23:10:35.407 に答える
6
しかし、あなたは何かを忘れました。capslockを押してShiftキーを押しながら入力すると、「capsison」というメッセージは表示されません。
修正されたバージョンは次のとおりです。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="Javascript">
$(document).ready(function(){
$('input').keypress(function(e) {
var s = String.fromCharCode( e.which );
if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) ||
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)){
if($('#capsalert').length < 1) $(this).after('<b id="capsalert">CapsLock is on!</b>');
} else {
if($('#capsalert').length > 0 ) $('#capsalert').remove();
}
});
});
</script>
</head>
<body>
<label style="float:left;display:block;width:80px;">Login:</label><input type="text" /><br />
<label style="float:left;display:block;width:80px;">Password:</label><input type="password" /><br />
</body>
于 2011-11-30T07:56:59.900 に答える
3
jqueryを使用してこれを行うためのより良い方法を見つけました:この方法では、ユーザーがcapslockを押したときに検出でき、ユーザーはチェックするために文字を入力する必要はありません:(ユーザーはcapslockの検出を開始するために少なくとも1つのキーを入力する必要があります) デモ: http://arthurfragoso.onphp.net/codes/capslock.html
<html><head><title>Checking Caps Lock using Jquery - Javascript</title></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form action="/codes/capslock.html" id="formid">
<div>
User:
</div>
<div>
<input type="text" id="user" />
</div>
<div>
Password:
</div>
<div>
<input type="password" id="password" />
</div>
<div id="capslockdiv" style="display: none; color: red;">
Caps Lock On
</div>
<div>
<input type="submit" />
</div>
</form>
<script>
$(document).ready(
function () {
check_capslock_form($('#formid')); //applies the capslock check to all input tags
}
);
document.onkeydown = function (e) { //check if capslock key was pressed in the whole window
e = e || event;
if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
if (typeof (window.capsLockEnabled) !== 'undefined') {
if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
window.capsLockEnabled = !window.capsLockEnabled;
$('#capslockdiv').toggle();
}
window.lastpress = e.timeStamp;
//sometimes this function is called twice when pressing capslock once, so I use the timeStamp to fix the problem
}
};
function check_capslock(e) { //check what key was pressed in the form
var s = String.fromCharCode(e.keyCode);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
window.capsLockEnabled = true;
$('#capslockdiv').show();
}
else {
window.capsLockEnabled = false;
$('#capslockdiv').hide();
}
}
function check_capslock_form(where) {
if (!where) { where = $(document); }
where.find('input,select').each(function () {
if (this.type != "hidden") {
$(this).keypress(check_capslock);
}
});
}
</script>
</body>
</html>
于 2012-04-18T15:29:56.700 に答える
1
私がしているのは、次の場合に警告を表示することです
- ユーザー名またはパスワードが正しくなく、
- 提供されたユーザー名またはパスワードはすべて大文字でした。
小さい文字だけを許可するのはかなり悪い考えです。そうすることで、考えられるパスワードの数を大幅に削減できます。
于 2010-02-22T05:02:37.650 に答える
-8
ユーザーがパスワードを作成した後、ログイン中にパスワードを入力するときに、パスワードが正しいかどうかを確認する前に、サーバー上でパスワードを小文字に変換することができます。
そのようにしてユーザーの労力を節約します。
于 2010-04-30T16:05:51.387 に答える