텍스트 관련 이벤트
textinput
textinput
이벤트는 사용자의 텍스트 입력방법(키보드, 마우스 dnd, 붙여넣기, 동양권 언어, 음성인식, 점자인식 등)에 개의치 않는다. 이 이벤트를 지원하는 브라우저는 아직 없고, 웹킷 브라우저는 이와 유사한 textInput
이벤트를 지원한다.
아래 코드는 숫자외에 다른 문자를 입력하지 못하게 막는다.
// ZipCode: <input type="text" id="zip" data-allowed-chars="0123456789" data-messageid="zipwarn">
//<spna id="zipwarn" style="color:red; visibility: hidden;">Digits only</spna>
window.onload = function() {
var ziptag = document.getElementById('zip');
if (ziptag.type == 'text' && ziptag.getAttribute('data-allowed-chars')) {
if(ziptag.addEventListener){
ziptag.addEventListener("keypress", filter, false);
ziptag.addEventListener("textInput", filter, false);
ziptag.addEventListener("textinput", filter, false);
}
else{
ziptag.attachEvent("onkeypress", filter);
}
}
function filter(event){
var e = event || window.event;
var target = e.target || e.srcElement;
var text = null;
if(e.type == "textInput" || e.type == "textinput"){
text = e.data;
}
else{
var code = e.charCode || e.keyCode;
if( code<32 || e.charCode == 0 || e.ctrlKey || e.altKey ){
return;
}
var text = String.fromCharCode(code);
}
var allowed = target.getAttribute("data-allowed-chars");
var messageid = target.getAttribute("data-messageid");
if(messageid){
var messageElement = document.getElementById(messageid);
}
for(var i = 0; i < text.length; i++){
var c = text.charAt(i);
if(allowed.indexOf(c) == -1){
console.log(messageElement);
if(messageElement) messageElement.style.visibility = "visible";
if(e.preventDefault) e.preventDefault();
if(e.returnValue) e.returnValue = false;
return false;
}
}
if(messageElement) messageElement.style.visibility = "hidden";
}
};
input
input
이벤트는 문서요소에 텍스트가 입력된후 발생한다. 이 이벤트는 취소할 수 없고 새로입력된 텍스트도 이벤트객체에 담지않는다. 하지만 이 이벤트를 쓰면 입력방법과는 무관하게 요소안의 텍스트내용이 바뀌었음을 전달 받을수 있다.
IE에서는 input 이벤트를 지원하지 않고 propertychange
이 있다.
아래코드는 영어 알파벳을 입력할경우(아이거 조건문 안만들어놨네) 대문자로 변환한다.
//<input type="text" id="upper">
(function(){
const upper = document.getElementById("upper");
if(upper.addEventListener){
upper.addEventListener("input", upcase, false);
}
else{
upper.attachEvent("onpropertychange", upcaseOnPropertyChange, false);
}
function upcase(event){
// const e = event || window.event;
// const s = e.data;
this.value = this.value.toUpperCase();
}
function upcaseOnPropertyChange(){
var e = window.event;
if(event.properyName === "value"){
this.onpropertychange = null;
this.value = this.value.toUpperCase();
this.onpropertychange = upcaseOnPropertyChange;
}
}
})();