On my webpage, I have a "register now" button in the header. On click this button will scroll the user to the bottom of the page and will, ideally, focus on a form field input and open the soft keyboard on mobile devices.
I am currently executing a .focus and .click state to the element after the smooth scroll function ends. While these two statuses are being applied, they are not opening the keyboard as desired.
componentDidMount = () => {
Events.scrollEvent.register('end', function(to, element) {
if(element.id === 'request-demo'){
var inputFocus = document.getElementById('name');
inputFocus.focus(console.log("focused"));
inputFocus.click(console.log("clicked"));
}
Events.scrollEvent.remove('end');
});
}
This function will open the keyboard on Android devices, but not IOS.
I am avoiding jQuery for this project, so vanilla solutions would be preferred
IOS will not allow developers to simulate user inputs within react-scroll's scrollEvent. By removing the focus and click states from within the end of scroll event, we were able to resolve this issue
Our current interpretation is that IOS blocks developers from simulating user inputs within on event functions, however any further insight would still be greatly appreciated
Related
The user needs to press the key X for the function to run and it works perfectly where there is a physical keyboard but how can I force a virtual keyboard on the mobile version? I can't think of a way to do this without adding an input field.
document.addEventListener("keyup", function(event) {
if (event.keyCode === 88) {
newx();
}
});
function newx()
{alert("Hello");
}
<h1>Key in X</h1>
The repl I'm using this for -> https://home.ajkallivayalil.repl.co/
After some searching on Google, I came up with this, but I suggest you make another user experience, as #95faf8e76605e973 said. (e.g. a button)
If you have some sort of input field and make it hidden, like using display: none or visibility: hidden, you can use JavaScript to activate it anytime, thus bringing up a keyboard.
To do this, you just have to use .focus() on your element.
A link to the SO page I found.
How to disable contextmenu in chrome while on a touch screen. This pops up on selection/on long tap of any text. Is there any solution which we can manage using css or javascript.
you can try to add a listener, that catchs every touch on a section
document.getElementById('yoursection').addEventListener('touchstart', (event) => {
event.preventDefault();
})
but note, that in that section nothing more can be touched ...
I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.
I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });
For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}
We are using W2UI (Javascript UI) controls. It has a "Multi Select" input control with associated div container with suggestion data. Whenever user clicks on input control a suggestion div is popped up and user can select multiple items from the list. Please find below screenshot
We have set overfloaw:auto of div When suggestion list has more than 10 records. (Refer below screenshot)
At this point, clicking on scrollbar works fine in Chrome and Mozilla but in case of IE it closes / hides the div.
We have made initial RCA of this as follow.
When a scrollbar is associated to a div, clicking on scrollbar causes blur event to fire for that div.
In W2UI library, blur event is used to hide the suggestion div causing it to close. We also found that, clicking on scrollbar does not cause blur event to fire in chrome & firefox.
Now we want to suppress blur event when user clicks on "scrollbar" in case of IE.
We are unable to identify scrollbar click.
Please share your thoughts / workarounds about suppressing blur() event conditionally.
I am also facing same issue we have made some changes in w2ui lbrary
we have set global variable flagClick first time it is false. & added below events
var div = $('#w2ui-global-items');
div.on('mouseover', function (event)
{
flagClick = false;
$('.w2ui-list').find('input').focus();
});
div.on('mouseout', function (event)
{
flagClick = true;
});
and changed blur event logic of div
as below --
.on('blur', function (event)
{
if (flagClick)
{
$(div).css('outline', 'none');
obj.hide();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
})
almost this logic have solved our issue, except one .
When we click on search textbox then list will populate , if after that we click on list scroolbar and after that click on outside list div , List not getting hide (div blur event not getting fired).
try this solution , it will help u .
If you get solution to our problem pls post on same .
An updated version of w2ui came out just a few days ago where controls, including multiselect, have been refactored. It seems to work fine for me with 1.4 version.
I'm building my first application where I have to have compliance with keyboard navigation for accessibility reasons.
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
When the user does this, it isn't always possible to tab back into dialog box. IE8 and FF8 behave somewhat differently in this respect. I've tried to capture the tab key with the following event handler -
lastButton.keydown(function (e) {
if (e.which === TAB_KEY_CODE) {
e.stopPropagation();
$(this).focus();
}
});
But this doesn't work as it appears the browser processes the key press after jquery is done.
Two questions -
For Accessibility compliance, do I even have to worry about this? Although, for usability reasons, I think that I should.
Is there a way to make this work?
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
... and then tabbing occurs below the modal box, under a grey semi-transparent layer with scrollbar jumping from bottom to top after a few keypresses? Yes, this is a concern for sighted users who use the keyboard to browse and won't know how to go back to the modal box without pressing Tab a hundred times. Blind people won't even know the modal box is still displayed (they still can see/hear the entire DOM with their screen reader!) and that the page/script is waiting for a submit or cancel decision so it's also a concern for them.
An example done right is shown at http://hanshillen.github.com/jqtest/#goto_dialog (click on Dialog tab, direct link with anchor doesn't work :/ ). It'll tab forever inside the modal box till you click on Close or OK and will put you back on the focused element that triggered the modal box (I think it should focus the next focusable element after leaving the modal box but nevermind, this isn't the biggest accessibility problem here).
This serie of scripts is based on jQueryUI and are highly improved for keyboard and ARIA support and any accessibility problem that could exist in the original scripts. Highly recommended! (I tried to mix jQuery UI original scripts and these ones but didn't manage to get anything working, though you don't need to do so: these scripts work fine by themselves)
Maybe you should prevent the default action with preventDefault() instead of stopping the propagation and use keypress instead of keydown.
In this way there should be no need to regain focus.
Stopping the propagation doesn't work because it just prevent the event from bubbling up. You could think about using stopImmediatePropagation() but i think that changing input on the pression of the tab can't be stopped that way and preventDefault() is more correct.
lastButton.keypress(function (e) {
if (e.which === TAB_KEY_CODE) {
e.preventDefault();
}
});
fiddle here: http://jsfiddle.net/jfRzM/
Im a little late to the party, but I found I had to call preventDefault in the other keyboard events as well.
ex) I was setting the focus in the keyup event. But the browser was still doing its thing in either keydown or keypress. So I had something like this (I used JQuery/Typescript, but the idea should translate to about anything):
elem.keyup(this.onDialogKeyPress);
elem.keydown(this.onDialogPressPreventDefault);
elem.keypress(this.onDialogPressPreventDefault);
...
private onDialogPressPreventDefault = (e: KeyboardEvent) => {
const keys = [9, 27];
if (keys.includes(e.which)) {
e.preventDefault();
return false;
}
}
private onDialogKeyPress = (e: KeyboardEvent) => {
// Tab
if (e.which == 9) {
e.preventDefault();
// Do tab stuff
return false;
}
// Esc
else if (e.which == 27) {
e.preventDefault();
// Do Esc stuff
return false;
}
}