Iframve v2 - iOS Touch

shim for iOS blur issue

HTML

<p id="data"></p>

<!--update the src of this iframe to the HTPURL you obtained from the https://test-htp.tokenex.com/api/v1 call -->
<iframe id="tokenExIframe" height="32px" scrolling="no" frameborder="0" src="https://test-htp.tokenex.com/iframe/v2/1316ef74200a469796820fcab3ea697d"></iframe>
<br/>

<button type="button" id="bthTokenize">Tokenize</button>
<button type="button" id="bthValidate">Validate</button>
<button type="button" id="btnReset">Reset</button>
<button type="button" id="btnPretty">Enable Pretty</button>
<button type="button" id="btnNumeric">Enable numeric</button>
<button type="button" id="btnFocus">focus</button>
<button type="button" id="btnBlur">blur</button>

JavaScript

document.getElementById('bthValidate').onclick = validate;
document.getElementById('bthTokenize').onclick = tokenize;
document.getElementById('btnReset').onclick = reset;
document.getElementById('btnPretty').onclick = pretty;
document.getElementById('btnNumeric').onclick = numeric;
document.getElementById('btnFocus').onclick = focus;
document.getElementById('btnBlur').onclick = blur;
var iframe = document.getElementById("tokenExIframe");

//add event listener for postmessage
if (window.addEventListener) {
    addEventListener("message", listener, false)
} else {
    attachEvent("onmessage", listener)
}
//only add this shim for apple devices
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
    if (window.addEventListener) {
        addEventListener("focus", blur, false)
    } else {
        attachEvent("onfocus", blur)
    }
}

function blur() {
    //send the "blur" command to our iframe
    iframe.contentWindow.postMessage('blur', 'https://test-htp.tokenex.com');
}

function pretty() {
    iframe.contentWindow.postMessage('enablePrettyFormat', 'https://test-htp.tokenex.com');
}

function numeric() {
    iframe.contentWindow.postMessage('enableNumericInput', 'https://test-htp.tokenex.com');
}

function focus() {
    iframe.contentWindow.postMessage('focus', 'https://test-htp.tokenex.com');
}
//enable pretty formated pan
function tokenize() {
    iframe.contentWindow.postMessage('tokenize', 'https://test-htp.tokenex.com');
}
//send the validate command to the iframe
function validate() {

    iframe.contentWindow.postMessage('validate', 'https://test-htp.tokenex.com');
}
//send the reset command to the iframe
function reset() {
    var iframe = document.getElementById("tokenExIframe");
    iframe.contentWindow.postMessage('reset', 'https://test-htp.tokenex.com');
}

//handle the message from the iframe
function listener(event) {
    if (event.origin === 'https://test-htp.tokenex.com') {
        var message = JSON.parse(event.data);
        switch...