I am making a pwa for mobile and you can hold a button with your finger then a popup will come with the standard "copy linkadress" "copy text" "share link" etc.
How can I disable the popup thingy without disabling the click function. The button redirects to a different site
<a class="Button-one" title="Relevant Title" href="HTML/test.html">BTN-1</a>
html code for the button.
With css i can obviously use pointer-events: none;but that will also remove the main purpose of a button
To disable the context menu that appears on mobile devices when a user holds a button, you can use the contextmenu event in JavaScript. The contextmenu event is triggered when the context menu is about to be shown, and you can prevent it from being shown by calling the preventDefault method on the event object.
document.getElementById("my-button").addEventListener("contextmenu", function(event) {
event.preventDefault();
});
document.getElementById("my-button").addEventListener("click", function() {
// Your click handling code here
});
Related
I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/
I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers
I have a web app where I need to move content based on if the virtual keyboard is being displayed.
When the user clicks the input, I assume focus and the keyboard would be displayed. I shift some content around.
I then need to know when the virtual keyboard is hidden to move content back. I assumed the best way to do this was on blur but this is preventing the user from clicking the buttons on the screen. Click/tapping hides the keyboard, then the button has to be pressed again to finally register the click. There is a submit and cancel button so on blur, I can't assume they are clicking submit and programmatically click it.
//issue: button click being ignored
$(document).on('blur', '.swal2-input', function () {
if (isMobile.any()) {
//move content
}
});
I have solved the issue by listening to mousedown on the element and then triggering the click from there. You
So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});
At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.
When an text input element has focus (and the soft keyboard is visible), I can't click the submit button (which is clearly visible) directly. I have to first dismiss the keyboard (by clicking elsewhere or on "Done" on the keyboard), and then click the submit button.
This is confusing behaviour. I have considered removing the log-in button altogether when the keyboard is visible, but that would be too confusing (for users wouldn't know that they could click "Go", or will be annoyed that the login button keeps disappearing).
This only happens on iOS (not sure if its restricted to iOS 7, but suspect it might be), and I'm using Telirik AppBuilder for my app.
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
Because I was using <button> tag the soft keyboard popped up when not required. I have now changed all for <table> (inside a <td> tag, but could be a <div> ) with an <img> tag inside for the icons. To make the table look more like a button there is a CSS class for colours/borders. A submit area is right at the top (too).
The page can be inspected at http://ask.stroudvoices.co.uk/
It would seem that Android (assume iPad etc also) treat buttons as another kind of <input>, whereas <table> is regarded as <body>.
Sometimes there is a simple answer, from old technology!
I meet a similar problem.What my need is when I tap the submit button and I want to keep the soft-keyboard visible.
Here is my solution.
submit.addEventListener('mousedown', function(e) {
e.preventDefault();
});
I give the submit button a mousedown event, and prevent the default event. it's work on most mobile phones.but in some system found ios 12.1.2 is not available.it's just like the question's owner says, i need to tap twice, one to hide the keyboard, second to reach the submit button.
This confused me and I can't solve it.