jQuery의 keydown () 이벤트 핸들러에서 누른 문자를 디코딩하는 방법
jQuery의 keydown함수에 의해 호출되는 핸들러 내에서 텍스트 필드에 어떤 문자가 입력되었는지 알아 내야 합니다. key.which나에게 키 코드 만 제공하지만 어떤 ASCII 문자가 key나타내는 지 알아 내야 합니다. 어떻게해야합니까?
문자 입력의 경우 keypress()눌린 문자의 실제 ASCII 코드를보고 하는를 사용하는 것이 좋습니다 . 자동으로 대소 문자를 처리하고 문자가 아닌 누름을 무시합니다. 두 경우 모두 fromCharCode ()를 사용하여 문자열 표현으로 변환 할 수 있습니다. 예
var c = String.fromCharCode(e.which) // or e.keyCode
그냥에 대한 기억 keydown()하고 keyup(), 당신이 사용하는 경우 추적 유지해야합니다 e.shiftKey상태.
keyPress이벤트는 입력 된 문자를받을 필요가 것입니다. ( keydown 이벤트에 대한 아래 해결 방법 참조 ).
keydown그리고 keyup동시에 누르면 어떤 키를 나타내는 코드를 제공 keypress입력 된 문자를 표시합니다.
jQuery e.which를 사용 하면 키 코드 를 얻을 수 있고 String.fromCharCode 를 사용 하면 눌린 특정 문자 (포함 shiftKey) 를 얻을 수 있습니다 .
데모 : http://jsfiddle.net/9TyzP/3
암호:
element.on ('keypress', function (e) {
console.log(String.fromCharCode(e.which));
})
e.which다른 브라우저는이 정보를 저장하기 위해 다른 속성을 사용하기 때문에 jQuery라고 말했습니다 . jQuery는.which속성을 정규화 하므로 키 코드를 검색하는 데 안정적으로 사용할 수 있습니다.
해결 방법 keydown
그러나 눌려진 문자가 작동하도록하는 간단한 해결 방법을 작성할 수 있습니다 keydown. 해결 방법은 Shift 키를 누르지 않고 charCode로 키를 사용하여 개체를 만드는 것이며 값은 Shift 키를 사용하는 것입니다.
참고 : @Sajjan Sarkar가 지적했듯이 e.which다른 브라우저에서 반환되는 키 코드 값 에는 약간의 차이가 있습니다. 여기에서 더 많은 것을 읽으십시오
크로스 브라우저 keyCode 값을 정규화하도록 데모 코드를 업데이트했습니다. IE 8, FF 및 Chrome에서 테스트 및 검증되었습니다.
아래 전체 코드 및 업데이트 된 데모 : http://jsfiddle.net/S2dyB/17/
$(function() {
var _to_ascii = {
'188': '44',
'109': '45',
'190': '46',
'191': '47',
'192': '96',
'220': '92',
'222': '39',
'221': '93',
'219': '91',
'173': '45',
'187': '61', //IE Key codes
'186': '59', //IE Key codes
'189': '45' //IE Key codes
}
var shiftUps = {
"96": "~",
"49": "!",
"50": "@",
"51": "#",
"52": "$",
"53": "%",
"54": "^",
"55": "&",
"56": "*",
"57": "(",
"48": ")",
"45": "_",
"61": "+",
"91": "{",
"93": "}",
"92": "|",
"59": ":",
"39": "\"",
"44": "<",
"46": ">",
"47": "?"
};
$(element).on('keydown', function(e) {
var c = e.which;
//normalize keyCode
if (_to_ascii.hasOwnProperty(c)) {
c = _to_ascii[c];
}
if (!e.shiftKey && (c >= 65 && c <= 90)) {
c = String.fromCharCode(c + 32);
} else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
//get shifted keyCode value
c = shiftUps[c];
} else {
c = String.fromCharCode(c);
}
//$(element).val(c);
}).on('keypress', function(e) {
//$(element).val(String.fromCharCode(e.which));
});
});
키보드 이벤트에 대한 추가 정보-
keydown, keypress 및 keyup 이벤트는 사용자가 키를 누를 때 발생합니다.
keydown 사용자가 키를 누를 때 발생합니다. 사용자가 키를 누르고있는 동안 반복됩니다.
keypress 텍스트 입력과 같이 실제 문자가 삽입 될 때 발생합니다. 사용자가 키를 누르고있는 동안 반복됩니다.
keyup 해당 키의 기본 동작이 수행 된 후 사용자가 키를 놓을 때 발생합니다.
키를 처음 누르면 keydown이벤트가 전송됩니다. 키가 수정 자 키가 아니면 keypress이벤트가 전송됩니다. 사용자가 키를 놓으면 keyup이벤트가 전송됩니다.
키를 누르고 있으면 자동 반복이 시작됩니다. 그 결과 다음과 유사한 일련의 이벤트가 전달됩니다.
keydown
keypress
keydown
keypress
<<repeating until the user releases the key>>
keyup
데모 : http://jsfiddle.net/9TyzP/1/
keyup, keydown vs keypress
keydown 및 keyup 이벤트는 키를 누르거나 놓는 것을 나타내고 keypress 이벤트는 입력되는 문자를 나타냅니다.
데모 : http://jsfiddle.net/9TyzP/
참조 :
나는 이것을한다. 값이 숫자가 아닌 경우 키 누르기를 무시합니다. 아무 문제없이 작동하는 것 같습니다 ...
$("input").on("keypress", function(e) {
if(!jQuery.isNumeric(String.fromCharCode(e.which)))
return false;
});
Selvakumar Arumugam의 대답은 숫자 패드를 테스트 할 때까지 매력적으로 작동합니다. 그래서 여기에 사소한 업데이트가 있습니다.
$(document).on('keydown', function(e) {
var c = e.which;
if (_to_ascii.hasOwnProperty(c)) {
c = _to_ascii[c];
}
if (!e.shiftKey && (c >= 65 && c <= 90)) {
c = String.fromCharCode(c + 32);
} else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
c = shiftUps[c];
} else if (96 <= c && c <= 105) {
c = String.fromCharCode(c - 48);
}else {
c = String.fromCharCode(c);
}
$kd.val(c);
})
gr을 en 문자로 변환하기 위해 위의 javascript 클래스를 만들고 사용했습니다. 더 많은 언어에 사용할 수 있습니다. 사용자가 누른 값을 변경하기 위해 JQuery를 사용합니다.
var CharMapper = function (selector) {
this.getLanguageMapper = function (languageSource, languageTarget) {
// Check if the map is already defined.
if (typeof langugageCharMap === "undefined") {
langugageCharMap = {};
}
if (typeof langugageCharMap[languageSource] === "undefined") {
langugageCharMap[languageSource] = {};
}
// Initialize or get the language mapper.
if (typeof langugageCharMap[languageSource][languageTarget] === "undefined") {
switch (languageSource) {
case "GR":
switch (languageTarget) {
case "EN":
langugageCharMap[languageSource][languageTarget] = {
"α": "a", "ά": "a", "β": "b", "γ": "g", "δ": "d", "ε": "e", "έ": "e", "ζ": "z", "η": "h", "ή": "h", "θ": "th", "ι": "i", "ί": "i", "ϊ": "i", "ΐ": "i", "κ": "k", "λ": "l", "μ": "m", "ν": "n", "ξ": "ks", "ο": "o", "ό": "o", "π": "p", "ρ": "r", "σ": "s", "ς": "s", "τ": "t", "υ": "y", "ύ": "y", "ϋ": "y", "ΰ": "y", "φ": "f", "χ": "x", "ψ": "ps", "ω": "o", "ώ": "o", "Α": "A", "Ά": "A", "Β": "B", "Γ": "G", "Δ": "D", "Ε": "E", "Έ": "E", "Ζ": "Z", "Η": "H", "Ή": "H", "Θ": "TH", "Ι": "I", "Ί": "I", "Ϊ": "I", "Κ": "K", "Λ": "L", "Μ": "M", "Ν": "N", "Ξ": "KS", "Ο": "O", "Ό": "O", "Π": "P", "Ρ": "R", "Σ": "S", "Τ": "T", "Υ": "Y", "Ύ": "Y", "Ϋ": "Y", "Φ": "F", "Χ": "X", "Ψ": "PS", "Ω": "O", "Ώ": "O"
};
break;
case "GR":
default:
throw "Language(" + languageTarget + ") is not supported as target for Language(" + languageSource + ").";
}
break;
case "EN":
default:
throw "Language(" + languageSource + ") is not supported as source.";
}
}
return langugageCharMap[languageSource][languageTarget];
};
// Check the existance of the attribute.
var items = $(selector).find("*[data-mapkey]");
if (items.length === 0) {
return;
}
// For each item.
for (var i = 0; i < items.length; i++) {
var item = items[i];
// Get the source and target language.
var languages = $(item).attr("data-mapkey");
var languageSource = languages.split("_")[0];
var languageTarget = languages.split("_")[1];
// Add the event listener.
var self = this;
$(item).keypress(function (event) {
event.stopPropagation();
// Get the mapper to use.
var mapper = self.getLanguageMapper(languageSource, languageTarget);
// Get the key pressed.
var keyPressed = String.fromCharCode(event.which);
// Get the key to set. In case it doesn't exist in the mapper, get the key pressed.
var keyToSet = mapper[keyPressed] || keyPressed;
// Set the key to the dom.
this.value = this.value + keyToSet;
// Do not propagate.
return false;
});
}
};
예,
<input type="text" data-mapkey="GR_EN" />
<script type="text/javascript">
new CharMapper("body");
</script>
'developer tip' 카테고리의 다른 글
| Lodash를 Angular JS와 함께 사용하는 방법은 무엇입니까? (0) | 2020.11.16 |
|---|---|
| 모든 개발자가 알아야 할 기본적인 명확한 개념은 무엇입니까? (0) | 2020.11.16 |
| gradle의 versionNameSuffix에 날짜 빌드를 추가하는 방법 (0) | 2020.11.16 |
| 프록시 뒤의 dockerfile에서`apt-get`을 어떻게 실행합니까? (0) | 2020.11.16 |
| JavaScript : 정의되지 않음! == 정의되지 않음? (0) | 2020.11.16 |