We Keep Coding

touch issue with input forms in mobile and tablets

My website opens articles in an iframe popup. My problem is that the input fields of the forms (on mobile phones and tablets) does not work on this pop-up page.
For example, when the user wants to write something in the comments section, touching the input section does not work, and the input form is not activated.
I have been looking for a solution for this problem for several days, but I have not succeeded yet.
Although on another site, I saw a user who had almost the same problem, and the web design company provided the solution that you can see in my attached image.
Now I found some similar code on my site, but since I am not a JavaScript programmer, I don't know exactly how to change my code.
If you know javascript, you may know how to change "my code" in the right way? Or if you know any other way to solve this issue?
This my code:
//function check iframe popup load to resize
function ifmOnload(){
if(this.src == 'about:blank'){
return;
}
$(document.body).addClass ('popupview-loaded');
var doc = this.contentDocument ? this.contentDocument : window.frames[this.id].document,
ifm = this;
if (doc.readyState && doc.readyState != 'complete'){
return;
}
if (doc.body && doc.body.innerHTML == "false"){
return;
}
this.height = $(doc).height();
if(window.popupIscroll){
window.popupIscroll.destroy();
}
window.popupIscroll = new iScroll('popup-inner', {vScrollbar: true, hScrollbar: false, scrollbarClass: 'popupTracker', useTransform: false, scroller: (isTouch ? doc.getElementById('container') : null) });
if(isTouch){
$(doc).bind('touchmove.scroll', function(e){
e.preventDefault();
});
}
if($.browser.webkit || $.browser.safari ||$.browser.opera || $.browser.mozilla || ($.browser.msie && $.browser.version >= 9)){
$(doc).bind('mousewheel.iscroll', $.proxy(window.popupIscroll._wheel, window.popupIscroll));
} else if($.browser.msie && $.browser.version < 9){
var script = doc.createElement('script');
script.src = JADef.tplurl + 'js/scrollevent.js';
doc.body.appendChild(script);
}
$(doc.body).find('a').each(function(){
if($(this).attr('target') != '_blank'){
$(this).attr('target', '_parent');
}
});
};
I must mention that I have this issue only in "Iframe Popup" and only in "mobile devices".
If I open article in a new window (without popup) or in PC, I don't see this issue.

Not able to remove the beforeunload event

We are using following code to show default pop up on refresh, tab close events
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, function (e) { // For >=IE7, Chrome, Firefox
if ($('#timeExpiredtxt').hasClass('hide') && $("#submittedAnsResponseText").hasClass("hide")) {
var confirmationMessage = 'You are attempting an assessment. Are you sure you want to leave this assessment?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
});
I want to remove and unbind this event at runtime. I tried the following code but no luck.
$(window).off("beforeunload");
$(window).off("onbeforeunload");
window.onbeforeunload = null;
$(window).unbind("beforeunload");

Had to change the event binding code.
function closeIt() {
if ($('#timeExpiredtxt').hasClass('hide') && $("#submittedAnsResponseText").hasClass("hide")) {
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
}
window.onbeforeunload = closeIt;
and unbind used below code
window.onbeforeunload = null;

Add link button does not work properly for wysiwyg editor in IE and Firefox

The wysiwyg runs smoothly in chrome but in Firefox & IE11(not an old one), whenever I click on the add link button, the focus gets shifted to the main editor. I tried many workarounds like manipulating the CSS, stopping the event propagation on click of the input Add link input, but nothing seems to work.
Open link http://mindmup.github.io/bootstrap-wysiwyg/ in IE11, click on add link icon then click on the URL box and then try to enter anything
I've added a workaround for Firefox(which run on document load), but it still does not work for IE.
msieVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./) || typeof InstallTrigger !== 'undefined') // If Internet Explorer, return version number
{
$('a.essay-btn').on('click', function(e){
let self= $(this).closest('.hero-unit');
self.find('.add_link').show();
return false;
})
let span2 = 'http://';
$('.span2').on('keyup', function(f) {
span2 = ''+this.value+'';
return false;
})
$('.essay-btn-add').on('click', function(g){
let self= $(this).closest('.hero-unit');
let editor = self.find('.editor');
editor.html(editor.html()+span2);
self.find('.add_link').hide();
return false;
})
}
else // If another browser, return 0
{
// alert('otherbrowser');
return false;
}
}

How to call function on Return true

i have following code which return a popup message for reload page or not.
I have to perform a function when user click on "Reload page" and remain on same page when user click on "Not Reload".
window.onbeforeunload = function()
{
return "";
};
How can i do this?

Try with this:
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compatable
myEvent(chkevent, function (e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = ' '; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
Fetched from this article. This is their demo

Standalone iOS webapp: Prevent opening Safari and keep current click-events

I have a mobile web app that's capable of running standalone. To prevent opening hrefs in Safari and keep them in the webapp, I did:
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$('a').on('click', function(e){
e.preventDefault();
var new_location = $(this).attr('href');
if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
window.location = new_location;
}
});
}
However, this also keeps existing click-events from functioning that are bound to a-tags.
So I tried this but it does not work:
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$('a').on('click', function(e){
var ev = $._data(this, 'events');
if(!ev && !ev.click) {
e.preventDefault();
var new_location = $(this).attr('href');
if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
window.location = new_location;
}
}
});
}
Any help is appreciated!

I know this is an old question, so maybe you fixed it already, but I'll answer anyway in case it helps someone else. Moving the automatic-event-cancellation further down should do the trick.
So:
if (("standalone" in window.navigator) && window.navigator.standalone) {
// For iOS Apps
$('a').on('click', function(e){
var new_location = $(this).attr('href');
if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
window.location.href = new_location;
return false; // Cancel the usual link-opening
}
// If the 'if' block above didn't run, process the click as normal
});
}