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.
Related
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
I have this code:
document.getElementById("1").oncontextmenu = function() {
return false
}
It disables the little window that shows after a right click (only on the button/image).
On my code (https://jsfiddle.net/nnuyguat/) everything is working fine, except for when I do a right click on the image as it triggers the left click event and changes the image untill I move the mouse.
Another related problem is if I press left click without releasing and then right click (releasing the right button), it will also change the image.
I need to prevent the image changing with right clicks. It should work as the closing button of the browser (except it's another images and it doesn't close anything).
You could use event.button to check which button is pressed because event.button returns a number which indicates which mouse button was pressed.
Source
Edit:
if (event.button === 2){
// run your function
}
That should be correct, as I have never used this before.
The right click event is not triggering a left click. It is just activating your object. Your image says "click" but it is inaccurate. It should say "Active".
Second, a number is NOT a valid ID. So rename your div from id="1" to id="one" or similar.
Finally, try with this code, instead of yours:
document.getElementById("one").addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('hello from right click');
return false;
}, false);
See https://jsfiddle.net/nnuyguat/3/
The issue with your image changing on right click is not related to your javascript, but to your css. The :active CSS pseudo-class matches when an element is being activated by the user. According to the specs this should only be when the element is activated with the primary mouse button, but it seems like most browsers do not implement the spec correctly. See this question for info.
A work around maybe to abandon the :active pseudo-class, and set up a function to change the content explicitly on left click.
Its because of the oncontextmenu event. Remove it and it will work
How can I go about detecting if the file input dialog is currently open?
I'm trying to integrate some file upload functionality into a popup (bootstrap style) model on a web app I'm building. As part of the model's behaviour, if escape is pressed, the model is closed.
This is all good till I open a file input dialog from the open model, if I hit escape to close the input dialog, it'll also close the model.
A super simplified version of what I'm trying to achieve
http://jsfiddle.net/ckevy/1/
Try solving it like this:
When a user clicks on the file selection input, give it focus: $(el).focus().
Then, anytime a user hits ESC, look if the $(':focus') element is the file selection input. In that case, blur() that input and do not close the modal. Worst case – the user wants to close the modal, presses ESC and nothing happens [1]. Thinks "wtf", presses ESC again and modal closes as it should. Just make sure that the file selection input does get focus in all possible cases – tabbing through inputs, etc. If you use a third party uploader and what I've said doesn't work – look into how that uploader wraps the file selection in a custom link or button, and what actually receives the click event in different cases (e.g. when you tab, the input might receive the event, when you click, it could be the link). Overall, it's manageable to have this working with the caveat I've described.
This works with expanded -s too similarly (just check that a select is not focused when ESC is hit).
You won't be able to detect all the cases when you need to blur() the file selection input. It's not a cross-browser solution. Even FF needs adjustments to work. I've been testing on webkit with positive results, in other browsers it might not work.
In my case works this code on jQuery:
// esc must close popup
$("body").keyup(function(e) {
if (27 == e.keyCode) {
hidepopup();
}
});
// input in popup
var $file = $("input:file");
// keyup will be catched for input, not for body
$file.bind("click", function(e) {
$(this).focus();
});
// keyup catching will be changed back to body after selecting file
$file.bind("change", function(e) {
$(this).blur();
});
// we catched esc keyup, so change esc catching back to the body
$file.keyup(function(e) {
if (27 == e.keyCode) {
$(this).blur();
// i don't know, why it works with return false, because i am not js programmer ), but cancelBubble or e.preventDefault is not working
return false;
}
});
I do not believe you actually have direct control over the dialog itself. In some browsers such as FF people have been able to manipulate the dialog to an extent but this does not apply to all browsers and all browser versions.
The easiest way to do this is to disable the shortcut key on the model dialog before opening the file window.
Based on Nikita's answer. If you check for focus on the input field before firing your code it solves the issue:
$('input[type="file"]').on('keydown',function(e){
//Prevents code from firing if file browser is open
if($(this).is(':focus')){
//run code here that should only be applied when the dialog box is closed
}
});
Consider the following example (also available here: http://jsfiddle.net/hq8Fg/1/). It works fine in IE9, but doesn't work in Chrome 16.
In IE, if I click on the radio button, I see the message, but in Chrome nothing happens.
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<script type="text/javascript">
function begin() {
var rb1 = document.getElementById('rb1');
rb1.addEventListener('focus', function() { document.getElementById("theText").value = "focus"; }, false);
}
</script>
</head>
<body onload="begin()">
<input id="rb1" type="radio" />
<textarea id="theText"></textarea>
</body>
</html>
Any idea why it's not working in Chrome and what I can do to fix it?
p.s. I know I can probably use a library like JQuery, but I want to know if it's possible without using any libraries.
According to this less than stellar source, the focus event for a radio button is only supposed to fire when you tab into it, which you can see in your fiddle.
I'll see if I can find some better documentation of this—MDN ideally.
EDIT
From this MDN article
Changing the focus
There are several ways to change the currently focused element. The
simplest is to call the focus method of a the XUL element that you
wish to set the focus to. The blur method can be used to remove the
focus from an element. The following example demonstrates this:
Example 5 : Source View
<button label="Focus"
oncommand="document.getElementById('addr').focus()"/> Or, you can use
the methods advanceFocus and rewindFocus on the command dispatcher.
These methods move the focus to the next element in sequence or the
previous element respectively. This is what happens when the user
presses TAB or Shift+Tab.
For textboxes, a special attribute, focused is added whenever the
element has the focus. You can check for the presence of this
attribute to determine if the element has the focus, either from a
script or within a style sheet. It will have the value true if the
textbox has the focus and, if the textbox does not have the focus, the
attribute will not be present.
Suppose you wanted to move the focus from where it currently is, to
the next place the browser thinks it should be. A user typically does
this by hitting the "Tab" key. You can do this anywhere you have a XUL
browser document by simply:
(emphasis mine)
You could try the onclick event since the problem isn't that the event is not called when the element gets focused; The problem is that it is really not focused on click. You can figure that out through focusing your textarea and then pressing SHIFT+Tab.
As best I can tell, the focus event only fires for a radio button when the keyboard is used to navigate to a radio button. For clicking on the radio button, use the click event like this: http://jsfiddle.net/jfriend00/XatCv/
In the autocomplete result list. How do I capture the click event? Currently results are links. When clicked they open a new window with the embedded url but when this happens the autocomplete doesn't lose focus and the result box gets stuck open. It stays open even when the user comes back and clicks anywhere on the page. the only way to make it lose focus is to click inside the input box and then click back out.
It looks like opening the new window loses focus from the input box but does not fire off a blur() event.
I was thinking if I could capture the click event I could just manually trigger a .blur() but I was unsuccessful at my attempts using the class for the list elements $("li") or their css names $(".ui-menu"). I also tried in the autocomplete Select event but that didn't do anything.
This looks like it might be a solution: http://jeremydorn.blogspot.com/2010/04/fixing-jquery-ui-autocomplete.html
But I was hoping for something more elegant.
Thanks
Why don't you give the links a click handler that closes the autocomplete?
For example:
$("a.autocompleteLink").click(function() {
$("input.autocomplete").autocomplete("close");
});