Backspace key not working in Custom HTML

문제 :

Microsoft Dynamics 365 CRM 에서 커스텀 페이지를 만들어 사용하다보면 input 태그에서 backspace 키가 정상적으로 동작하지 않습니다.

이유 :

Microsoft Dynamics 365 CRM에서 커스텀 페이지를 만들어 사용할 때, Global context 정보에 접근할 권한을 얻기 위해서 "ClientGlobalContext.js.aspx" 파일을 참조해야합니다. 

 하지만, 이 라이브러리를 사용하면 type="text"가 아닌 input 태그에서 backspace 키의 이벤트가 발생하지 않는 현상이 발생합니다.

해결 :

1. 모든 input의 타입을 "text"로 변경합니다.

- 모든 시나리오에 적합하지 않을 수도 있습니다.

2. 미리 적용된 DomEvent를 직접 제거합니다.

if (window.Sys && window.Sys.UI && window.Sys.UI.DomEvent && window.Sys.UI.DomEvent.prototype) {
  window.Sys.UI.DomEvent.prototype.preventDefault  = function() { };
  window.Sys.UI.DomEvent.prototype.stopPropagation = function() { };
}

event.preventDefault

- 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.

- 이벤트를 취소하는 도중에 preventDefault를 호출하면, 일반적으로는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게 됩니다.

- 이벤트의 취소가능 여부는 event.cancelable를 사용해서 확인할 수 있습니다. 취소 불가능한 이벤트에 대해서 preventDefault를 호출하면 아무 변화가 없습니다.

- DOM을 통한 이벤트의 전파를 막지 않습니다. 전파를 막을 때는 event.stopPropagation을 사용해야합니다.

event.stopPropagation

- 이벤트 capturing과 bubbling에 있어 현재 이벤트 이후의 전파를 막습니다.

참고 :

https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/reference/getglobalcontext-clientglobalcontext.js.aspx

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation