텍스트 관련 이벤트

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;
    }
  }
})();