JavaScript를 사용하여 Caps Lock이 켜져 있는지 어떻게 알 수 있습니까?
JavaScript를 사용하여 Caps Lock이 켜져 있는지 어떻게 알 수 있습니까?
한 가지 : 수 있는 은 """를 입니다. "" " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " " "를 첨부하는 것입니다.onkeypress모든 입력에 대해 이벤트를 수행한 후 매번 누른 문자가 대문자인지 확인하고 대문자인 경우 시프트가 눌린 상태인지 확인합니다.그렇지 않은 경우 Caps Lock이 켜져 있어야 합니다.너무 지저분하고 그냥...낭비 - 이것보다 더 좋은 방법은 없을까?
jQuery에서는
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});
키와 .s.toLowerCase() !== s요합니니다다
'어울리다'를 사용할 수 요.KeyboardEventCaps Lock (캡스 잠금)
이 함수는 다음 상태를 제공합니다.
- 알트
- AltGraph
- CapsLock
- 통제
- Fn(안드로이드)
- 메타
- NumLock
- OS(Windows 및 Linux)
- 스크롤 잠금
- 시프트
이 데모는 모바일(캐니우스)을 포함한 모든 주요 브라우저에서 작동합니다.
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
한번 시도해 보세요.작업 예를 추가했습니다.입력에 초점을 맞추고 있을 때 Caps Lock을 켜면 LED가 빨간색이 되고 그렇지 않으면 녹색이 됩니다.(Mac/Linux에서는 테스트되지 않았습니다)
메모: 두 버전 모두 사용할 수 있습니다.코멘트에 건설적인 의견을 주셔서 감사합니다.
구 버전: https://jsbin.com/mahenes/edit?js,output
그리고 여기 수정 버전이 있습니다(Mac에서 테스트하여 확인할 수 있는 사람)
신버전 : https://jsbin.com/xiconuv/edit?js,output
새로운 버전:
function isCapslock(e) {
const IS_MAC = /Mac/.test(navigator.platform);
const charCode = e.charCode;
const shiftKey = e.shiftKey;
if (charCode >= 97 && charCode <= 122) {
capsLock = shiftKey;
} else if (charCode >= 65 && charCode <= 90
&& !(shiftKey && IS_MAC)) {
capsLock = !shiftKey;
}
return capsLock;
}
이전 버전:
function isCapslock(e) {
e = (e) ? e : window.event;
var charCode = false;
if (e.which) {
charCode = e.which;
} else if (e.keyCode) {
charCode = e.keyCode;
}
var shifton = false;
if (e.shiftKey) {
shifton = e.shiftKey;
} else if (e.modifiers) {
shifton = !!(e.modifiers & 4);
}
if (charCode >= 97 && charCode <= 122 && shifton) {
return true;
}
if (charCode >= 65 && charCode <= 90 && !shifton) {
return true;
}
return false;
}
국제 문자의 경우 필요에 따라 다음 키에 대한 검사를 추가할 수 있습니다.관심 있는 문자의 키 코드 범위를 취득해야 합니다.키 맵핑 어레이를 사용하면, 행선지 지정의 모든 유효한 유스케이스 키가 보관 유지되는 경우가 있습니다.
대문자 A-Z 또는 'ä', 'ö', 'ü', 소문자 a-Z 또는 0-9 또는 ''', 'ö', 'ü'
위의 키는 예시일 뿐입니다.
문서의 키 누르기 캡처를 사용하여 "문자 대문자이며 시프트를 누르지 않음"을 사용하여 Caps Lock을 감지할 수 있습니다.그러나 문서의 핸들러에 도달하기 전에 다른 키 누르기 핸들러가 이벤트 버블을 터트리지 않도록 해야 합니다.
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
이 이벤트를 지원하는 브라우저에서는 캡처 단계에서 이벤트를 캡처할 수 있지만 일부 브라우저에서는 작동하지 않기 때문에 캡처하는 것은 다소 의미가 없는 것 같습니다.
Caps Lock 상태를 실제로 검출할 수 있는 다른 방법은 생각할 수 없습니다.체크는 간단하며, 검출할 수 없는 문자를 입력했다면...탐지할 필요가 없었습니다.
작년에 24가지 방법에 대한 기사가 있었다.꽤 좋지만, 국제적인 문자 지원이 부족하다(용도).toUpperCase()을 이용하다)
기존 답변의 대부분은 시프트를 누르지 않을 때 캡 잠금 ON을 점검하지만 Shift 키를 눌러 소문자를 표시해도 점검하지 않거나 캡 잠금 꺼짐 여부를 점검하지 않지만 비알파 키를 'OFF'로 간주합니다.알파벳 키를 대문자(시프트 또는 시프트 없음)로 누르면 경고가 표시되며, 알파벳 키를 대문자 없이 누르면 경고가 꺼지지만 숫자 또는 다른 키를 누를 때는 경고가 꺼지거나 켜지지 않습니다.
$("#password").keypress(function(e) {
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$("#CapsWarn").show();
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$("#CapsWarn").hide();
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
});
JQuery(JQuery 。여기에서는 Firefox에서의 이벤트 처리에 대해 설명하고 예기치 않은 대문자와 소문자를 모두 확인합니다.은 이음, 음음음음음 this this this 를 전제로 있다.<input id="password" type="password" name="whatever"/> 및 " "인 개별 "인 capsLockWarning표시해야 할 경고가 있습니다(그렇지 않으면 숨겨져 있습니다).
$('#password').keypress(function(e) {
e = e || window.event;
// An empty field resets the visibility.
if (this.value === '') {
$('#capsLockWarning').hide();
return;
}
// We need alphabetic characters to make a match.
var character = String.fromCharCode(e.keyCode || e.which);
if (character.toUpperCase() === character.toLowerCase()) {
return;
}
// SHIFT doesn't usually give us a lowercase character. Check for this
// and for when we get a lowercase character when SHIFT is enabled.
if ((e.shiftKey && character.toLowerCase() === character) ||
(!e.shiftKey && character.toUpperCase() === character)) {
$('#capsLockWarning').show();
} else {
$('#capsLockWarning').hide();
}
});
여기서의 상위 답변은 몇 가지 이유로 나에게 효과가 없었습니다(링크 불능의 코드와 불완전한 솔루션).그래서 저는 몇 시간 동안 모든 사람들이 최선을 다하도록 노력했습니다. 여기 jQuery와 non-jQuery를 포함한 제 것이 있습니다.
j쿼리
jQuery는 이벤트 개체를 정규화하므로 일부 체크가 누락됩니다.또한 모든 비밀번호 필드로 범위를 좁혀 경고 메시지를 추가했습니다.이는 Chrome, Mozilla, Opera 및 IE6-8에서 테스트되었습니다.안정적이며 숫자 또는 공백을 누를 때를 제외한 모든 Capslock 상태를 캡처합니다.
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var $warn = $(this).next(".capsWarn"); // handle the warning mssg
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
$warn.show();
} else {
$warn.hide();
}
}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");
jQuery 없음
다른 jQuery-less 솔루션 중 일부는 IE 폴백이 없었습니다.@Zappa가 패치했다.
document.onkeypress = function ( e ) {
e = (e) ? e : window.event;
var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
alert("CAPSLOCK is on."); // do your thing here
} else {
// no CAPSLOCK to speak of
}
}
주의: @Borgar, @Joe Libersedge, @Zappa의 솔루션과 @Pavel Azanov가 개발한 플러그인을 확인해 보십시오.그것은 시도해 본 적은 없지만 좋은 아이디어입니다.범위를 A-Zaz 이상으로 확장하는 방법을 알고 있는 사람은 편집해 주세요.또한 이 질문의 jQuery 버전이 중복으로 닫혔기 때문에 두 가지 모두 여기에 게시합니다.
는 용용 we we we we we we we we wegetModifierStateLock을 이벤트 Lock을 할 수 .onfocus비밀번호 필드가 초점을 맞추는 가장 일반적인 방법은 클릭인 또는 탭입니다.는 용용 we we we we we we we we weonclick 「마우스 클릭」을 사용합니다.onkeyup이전 입력 필드에서 탭을 검색합니다.패스워드 필드가 페이지의 유일한 필드이며, 자동 포커스가 설정되어 있는 경우 첫 번째 키가 해방될 때까지 이벤트는 발생하지 않습니다.이것은 정상이지만 이상적인 것은 아닙니다.패스워드 필드가 포커스를 잡으면 Caps Lock 툴팁을 표시하는 것이 좋습니다만, 대부분의 경우 이 솔루션은 매력과 같이 기능합니다.
HTML
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
https://codepen.io/anon/pen/KxJwjq
나는 이것이 오래된 주제라는 것을 알지만, 다른 사람들에게 도움이 될 수 있다면 되갚아주어야겠다고 생각했다.IE8에서는 질문에 대한 답변이 모두 작동하지 않는 것 같습니다.그러나 IE8에서 동작하는 코드를 찾았습니다(IE8 이하에서는 아직 테스트되지 않았습니다).필요한 경우 jQuery에 대해 쉽게 수정할 수 있습니다.
function capsCheck(e,obj){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
document.getElementById('#'+obj.id).style.visibility = 'visible';
}
else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}
이 함수는 다음과 같이 키 누르기 이벤트를 통해 호출됩니다.
<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>
이 솔루션은 쓰기 시 상태를 확인할 뿐만 아니라 키를 누를 때마다 경고 메시지를 전환합니다(몇 가지 제한 사항이 있음).
, 를 「」, 「A~Z」에 대해서 하기 때문에, A의 문자도 .A~Z로 하다toUpperCase() ★★★★★★★★★★★★★★★★★」toLowerCase()문자 범위와 대조하지 않고.
$(function(){
//Initialize to hide caps-lock-warning
$('.caps-lock-warning').hide();
//Sniff for Caps-Lock state
$("#password").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)) {
this.caps = true; // Enables to do something on Caps-Lock keypress
$(this).next('.caps-lock-warning').show();
} else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
this.caps = false; // Enables to do something on Caps-Lock keypress
$(this).next('.caps-lock-warning').hide();
}//else else do nothing if not a letter we can use to differentiate
});
//Toggle warning message on Caps-Lock toggle (with some limitation)
$(document).keydown(function(e){
if(e.which==20){ // Caps-Lock keypress
var pass = document.getElementById("password");
if(typeof(pass.caps) === 'boolean'){
//State has been set to a known value by keypress
pass.caps = !pass.caps;
$(pass).next('.caps-lock-warning').toggle(pass.caps);
}
}
});
//Disable on window lost focus (because we loose track of state)
$(window).blur(function(e){
// If window is inactive, we have no control on the caps lock toggling
// so better to re-set state
var pass = document.getElementById("password");
if(typeof(pass.caps) === 'boolean'){
pass.caps = null;
$(pass).next('.caps-lock-warning').hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>Caps Lock 토글링을 관찰하는 것은 키를 누르기 전에 Caps Lock의 상태를 알고 있는 경우에만 유용합니다.현재 Caps Lock 상태는 다음과 같이 유지됩니다.capsJavaScript 입니다.사용자가 대소문자를 누를 때 처음 Caps Lock 상태를 확인할 때 설정됩니다.창의 포커스가 흐트러지면 Caps Lock의 토글링을 볼 수 없게 되므로 알 수 없는 상태로 리셋해야 합니다.
최근 hashcode.com에 비슷한 질문이 있어 이를 처리하기 위해 jQuery 플러그인을 만들었습니다.또한 Caps Lock on Number(숫자에 대한 Caps Lock) 인식도 지원합니다(표준 독일어 키보드 레이아웃 Caps Lock은 숫자에 영향을 줍니다).
최신 버전은 jquery.capsChecker에서 확인할 수 있습니다.
twitter 부트스트랩이 있는 jQuery의 경우
다음 문자에 대해 대문자 잠김을 확인합니다.
대문자 A-Z 또는 'AE', 'ö', 'ü', '!', ''', ''sn'', '$', '%', '&', ''(', '=', ':', ';', '*', '''''
소문자 a-Z 또는 0-9 또는 'α', 'ö', 'ü', '.', '', '+', '#'
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var kc = e.which; // get keycode
var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
$(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
} else {
$(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
}
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");
Caps Lock 상태를 나타내는 변수:
let isCapsLockOn = false;
document.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
document.addEventListener( 'keyup', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
@user110902가 올린 이 jQuery 기반의 답변은 저에게 도움이 되었습니다.단, Shift 키를 누르는 동안 CapsLock을 검출하지 못했다는 @B_N의 코멘트에서 언급된 결함을 방지하기 위해 조금 개선했습니다.
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey )
|| ( s.toLowerCase() === s && s.toUpperCase() !== s && e.shiftKey )) {
alert('caps is on');
}
});
이렇게 Shift 키를 눌러도 동작합니다.
이 코드는 케이스에 관계없이 또는 시프트 키를 눌렀을 때 캡스 잠금을 감지합니다.
$('#password').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('caps is on');
}
});
저는 capsLock이라는 라이브러리를 작성했습니다.이 라이브러리는 당신이 원하는 대로 동작합니다.
웹 페이지에 포함시키면 됩니다.
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
다음으로 다음과 같이 사용합니다.
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
Caps Lock(캡스 잠금)Shift 키 、 Caps Lock 。는 '다니다'입니다.false그러니 조심해요.
그러나 다른 버전인 명확하고 단순한 것은 shifted capsLock을 처리하며 ASCII로 제한되지 않는다고 생각합니다.
document.onkeypress = function (e)
{
e = e || window.event;
if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
return;
var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
var capsLockOn = (s2 !== s);
document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];
편집: capsLockOn의 센스가 반전, doh, 수정되었습니다.
편집 #2: 이 내용을 좀 더 확인한 후 몇 가지 변경과 좀 더 자세한 코드를 적용했지만 더 많은 액션을 적절하게 처리합니다.
e.keyCode 대신 e.charCode를 사용하여 0 값을 체크하면 특정 언어 또는 문자 집합에 고유한 코딩 없이 많은 문자 이외의 키 누르기를 건너뜁니다.제가 알기로는 호환성이 약간 떨어지기 때문에 오래된 브라우저, 비주류 브라우저 또는 모바일 브라우저는 이 코드가 예상하는 대로 작동하지 않을 수 있지만, 어쨌든 제 상황에서는 그럴 가치가 있습니다.
이미 알려진 구두점 코드 목록과 대조하여 확인하면 캡스 잠금의 영향을 받지 않으므로 잘못된 부정으로 표시되지 않습니다.이렇게 하지 않으면 구두점 문자를 입력할 때 Caps Lock 표시기가 숨겨집니다.포함이 아닌 제외된 집합을 지정하면 확장 문자와 호환성이 높아집니다.이것은 가장 추잡하고 특별한 부분이며, 비서양 언어에는 문제가 될 만큼 구두점이나 구두점 코드가 다를 수 있습니다.하지만 적어도 제 상황에서는 IMO를 사용할 가치가 있습니다.
반응
onKeyPress(event) {
let self = this;
self.setState({
capsLock: isCapsLockOn(self, event)
});
}
onKeyUp(event) {
let self = this;
let key = event.key;
if( key === 'Shift') {
self.shift = false;
}
}
<div>
<input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
{this.capsLockAlert()}
</div>
function isCapsLockOn(component, event) {
let key = event.key;
let keyCode = event.keyCode;
component.lastKeyPressed = key;
if( key === 'Shift') {
component.shift = true;
}
if (key === 'CapsLock') {
let newCapsLockState = !component.state.capsLock;
component.caps = newCapsLockState;
return newCapsLockState;
} else {
if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
component.caps = true;
return true;
} else {
component.caps = false;
return false;
}
}
}
@joshuahedlund의 답변에 따르면, 저는 잘 작동했기 때문입니다.
코드를 다시 사용할 수 있도록 기능화하여 내 경우 본체에 연결했습니다.원하는 경우에만 암호 필드에 연결할 수 있습니다.
<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) {
if(e){
e = e;
} else {
e = window.event;
}
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$(divId).style.display='block';
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$(divId).style.display='none';
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
}
</script>
<style>
.errorDiv {
display: none;
font-size: 12px;
color: red;
word-wrap: break-word;
text-overflow: clip;
max-width: 200px;
font-weight: normal;
}
</style>
</head>
<body onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>
위의 Mottie와 Diego Vieira의 답변은 결국 우리가 사용하게 된 것이며 현재 받아들여지고 있는 답변이 될 것입니다.하지만 어느새 문자코드에 의존하지 않는 javascript 기능을 작성했습니다.
var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
capsLockIsOnKeyDown: function(event) {
var eventWasShiftKeyDown = event.which === 16;
var capsLockIsOn = false;
var shifton = false;
if (event.shiftKey) {
shifton = event.shiftKey;
} else if (event.modifiers) {
shifton = !!(event.modifiers & 4);
}
if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
var lastChar = event.target.value[event.target.value.length-1];
var isAlpha = /^[a-zA-Z]/.test(lastChar);
if (isAlpha) {
if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
&& !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
capsLockIsOn = true;
}
}
}
capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
return capsLockIsOn;
}
}
이렇게 .capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
하지만 다시 한 번 @Moties와 @Diego Vieira의 응답만 사용하게 되었습니다.
getModifierState()를 사용하면 어떨까요?
getModifierState() 메서드는 지정된 수식자 키가 눌렸거나 활성화된 경우 true를 반환합니다.
다음과 같이 사용할 수 있습니다.
function checkIfCapsLockIsOn(event) {
var capsLockIsOn = event.getModifierState("CapsLock");
console.log("Caps Lock activated: " + capsLockIsOn);
}
CapsLock이 ON인지 OFF인지 확인하고 콘솔에 표시합니다.원하는 기능 수행 방법을 변경할 수 있습니다.
그런 다음 이 기능을 예를 들어 키 다운 또는 키 업에 사용합니다.
<input type="text" onkeydown="checkIfCapsLockIsOn(event)">
아래 코드에서는 Caps가 잠기고 Shift를 사용하여 키를 누르면 경보가 표시됩니다.
false를 반환하면 현재 문자가 텍스트 페이지에 추가되지 않습니다.
$('#password').keypress(function(e) {
// e.keyCode is not work in FF, SO, it will
// automatically get the value of e.which.
var s = String.fromCharCode( e.keyCode || e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
return false;
}
else if ( s.toUpperCase() !== s) {
alert('caps is on and Shiftkey pressed');
return false;
}
});
이 간단한 코드를 알기 쉽게 시험해 보다
이것은 스크립트입니다.
<script language="Javascript">
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
그리고 Html은
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
이 코드를 사용해 보세요.
$('selectorOnTheInputTextBox').keypress(function (e) {
var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
var capsOn =
e.keyCode &&
!e.shiftKey &&
!e.ctrlKey &&
charCode >= 65 &&
charCode <= 90;
if (capsOn)
//action if true
else
//action if false
});
행운을 빈다 :)
다음은 jquery ui를 사용하는 커스텀 jquery 플러그인으로, 이 페이지의 모든 좋은 아이디어로 구성되어 있으며 툴팁 위젯을 활용합니다.Caps Lock 메시지는 모든 비밀번호 상자에 자동으로 적용되며 현재 html을 변경할 필요가 없습니다.
사용자 지정 플러그인 코드...
(function ($) {
$.fn.capsLockAlert = function () {
return this.each(function () {
var capsLockOn = false;
var t = $(this);
var updateStatus = function () {
if (capsLockOn) {
t.tooltip('open');
} else {
t.tooltip('close');
}
}
t.tooltip({
items: "input",
position: { my: "left top", at: "left bottom+10" },
open: function (event, ui) {
ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
if (!capsLockOn) t.tooltip('close');
},
content: function () {
return $('<p style="white-space: nowrap;"/>')
.append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
.append('Caps Lock On');
}
})
.off("mouseover mouseout")
.keydown(function (e) {
if (e.keyCode !== 20) return;
capsLockOn = !capsLockOn;
updateStatus();
})
.keypress(function (e) {
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
if (!isUp && !isLow) return; //This isn't a character effected by caps lock
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ((isUp && !isShift) || (isLow && isShift)) {
capsLockOn = true;
} else {
capsLockOn = false;
}
updateStatus();
});
});
};
})(jQuery);
모든 암호 요소에 적용...
$(function () {
$(":password").capsLockAlert();
});
Javascript 코드
<script type="text/javascript">
function isCapLockOn(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('alert').style.visibility = 'visible';
else
document.getElementById('alert').style.visibility = 'hidden';
}
</script>
이 스크립트를 Html을 사용하여 연결해야 합니다.
<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>
늦은 건 알지만, 이건 다른 사람에게 도움이 될 수 있어.
여기 가장 간단한 해결책이 있습니다(터키 문자 사용).
function (s,e)
{
var key = e.htmlEvent.key;
var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
var digits = '0123456789';
if (upperCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[A]';
}
else if (lowerCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[a]';
}
else if (digits.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[1]';
}
else
{
document.getElementById('spanLetterCase').innerText = '';
}
}
그래서 저는 이 페이지를 찾았는데, 제가 찾은 솔루션이 마음에 들지 않아서 하나를 알아내서 여러분 모두에게 제안합니다.저는 문자를 입력할 때 Caps Lock이 켜져 있어야만 문제가 됩니다.이 코드로 문제가 해결되었습니다.빠르고 쉽게 사용할 수 있으며 필요할 때 언제든지 참조할 수 있는 capsIsOn 변수를 제공합니다.
let capsIsOn=false;
let capsChecked=false;
let capsCheck=(e)=>{
let letter=e.key;
if(letter.length===1 && letter.match(/[A-Za-z]/)){
if(letter!==letter.toLowerCase()){
capsIsOn=true;
console.log('caps is on');
}else{
console.log('caps is off');
}
capsChecked=true;
window.removeEventListener("keyup",capsCheck);
}else{
console.log("not a letter, not capsCheck was performed");
}
}
window.addEventListener("keyup",capsCheck);
window.addEventListener("keyup",(e)=>{
if(capsChecked && e.keyCode===20){
capsIsOn=!capsIsOn;
}
});입력할 때 caplock이 켜져 있으면 현재 문자를 소문자로 자동 변환할 수 있습니다.이렇게 하면 캡록이 켜져 있어도 현재 페이지에서처럼 작동하지 않습니다.사용자에게 알리기 위해 캡록이 켜져 있지만 양식 항목이 변환되었음을 나타내는 텍스트를 표시할 수 있습니다.
Caps-Lock을 검출하기 위한 보다 간단한 솔루션이 있습니다.
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
언급URL : https://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript
'programing' 카테고리의 다른 글
| PHP에서 빈 개체를 정의하는 방법 (0) | 2022.09.30 |
|---|---|
| NumPy 어레이를 단위 벡터로 정규화하는 방법 (0) | 2022.09.30 |
| Maria DB가 권장하는 RAM, 디스크, 코어 용량 (0) | 2022.09.30 |
| Python에서 문자열에서 숫자를 추출하는 방법은 무엇입니까? (0) | 2022.09.30 |
| Laravel mysql 마이그레이션 오류 (0) | 2022.09.30 |