I'm trying to create a UI that allows a user to hit Enter to progress past most screens. This works great in most browsers, but seems to fail in IE.
I set up a JS Fiddle showing the behavior -- https://jsfiddle.net/fat9qy40/2/. It seems essential that there be some sort of form element that's hidden. In my actual use case, I pop up a div with some instructions and would like the user to be able to hit Enter to dismiss it -- there's still an underlying form beneath that div.
HTML:
<html>
<head>
</head>
<body>
<button>
Fake button
</button>
<div style="z-index:100;position:absolute;top:0;left:0;border:1px solid black;background-color:green;height:50px;padding:10px">
Press enter to see an alert (unless you're using IE!)
</div>
</body>
</html>
JS:
$(document).on('keypress', function(e){
alert(e.which)
})
In Chrome, if I click in the white space in the bottom right and then hit Enter, I get a popup that says "13", which is what I would expect. In IE 11, if I do the same thing, nothing happens. Other keypresses do properly fire the keypress event however; for instance, if I hit F, I get an alert that says "102".
Anyone have any workarounds or suggestions? Thanks!
epascarello nailed it -- thanks! Strangely enough, I had thought to try keydown on my own, but it hit the same bug as keypress.
keyup, on the other hand, works great, and for my use case, I think it's just as good as keypress would have been.
Related
I had users of my PWA app complaining that they sometimes had to click a button maybe 2-10 times for it to fire. I could not figure out what caused this. First I thought that maybe it was due to an error in my code or a bad internet connection, but then I realized it:
If you don't hit a button in iOS Safari RIGHT ON the click event wont' fire.
In other words: If you tap the button with your finger, and then move your finger slightly in either direction, even just a few millimeters, and then release your finger, the click event wont' fire.
This seems to be happening quite a lot for regular human users, and they are left frustrated over what's happening (or not happening), without knowing why, or blaming my code.
I think the click event should fire if you release your finger while still being inside the button-area. This is the default behavior in Chrome for Windows at least.
Is there a solution to this? Trust me, I've been Googling this a lot and tried many different things, from different event-handlers to JS tap-libraries.
EDIT: The same thing seems to happen if you hold your finger down for more than just a split-second.
Here's a link to a PWA test app that I made containing a simple button and the code below: [the link has been removed]
Feel free to "download" the PWA by opening it in Safari and then hit Share -> Add to Home Screen.
document.addEventListener('click', function(e) {
if (!document.body.contains(e.target)) {
return;
}
if (e.target.matches('#testButton')) {
alert('Button clicked!');
}
});
<div id="testButton">Click me to test</div>
This was caused by a bug in Safari Mobile. I solved the problem by adding onclick="void(0)" to all of my buttons, like this:
<div id="testButton" class="button" onclick="void(0)">Click me to test</div>
So I'm troubleshooting an issue in our app and can't figure it out. I haven't written the base code and can only inject CSS and Javascript. There's a very basic span element with an ID, below that is a snippet of Javascript basically saying "if element with ID submitButton is clicked, submit form #createForm". However, on mobile it's broken and the browser is not giving any errors.
<form method="post" action="page.html" id="createForm">
<span id="submitButton">Submit form</span>
</form>
<script>
$("#submitButton").on("click", function (event) {
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
</script>
Now, this works perfectly on desktop browsers, even when using the "display as iphone" mode Chrome has. You can click the button, everything works.
However on mobile safari and when adding the page as a webapp the button no longer works. When you press it the page just scrolls to the top and does nothing. I've checked it out through my Mac and everything seems normal and exactly the same as on desktop. I can even run $("#submitButton").click(); on my iphone through the console and it functions perfectly.
There are no errors or warnings in the console. Does anyone have any suggestions to troubleshoot this? I sadly can't give direct access to the code because everything is on an IP locked server.
Is there any way of seeing exactly what happens when I click the button? I've tried the "Timelines" tab but that shows nothing when I press the button.
This answer by another user fixed it: https://stackoverflow.com/a/3026621/3461722
Thank you to Robin Zigmond for pointing me in the right direction. I was thinking that something was preventing the click event from firing, but it was simply not picking up on it because I needed to track the touchstart event.
The linked answer does mention that a better solution was found by adding cursor:pointer; to the button with CSS, however my element already had that so it obviously didn't work in this case.
Add this function to detect the taps on mobile:
$('#submitButton').bind( "touchstart", function(e){
if (attributeEqualsDisabled($(this).attr('disabled'))) {
return true;
}
$("#submitButton").attr('disabled', true);
$('#createForm').submit();
});
When user presses Ctrl+F on keyboard, browser shows a find box where user can type some text and browser finds occurrences of that text on the current webpage. I would like to keep this feature, but once my users clicks somewhere on the webpage, for example on a certain input element, I want chrome to cancel the finding - to stop - to hide the find box.
How to do that in JavaScript?
At least in chrome...
I know there is a possibility to intercept all keyboard events and cancel the Ctrl+F keystroke in general so the find bar never appears, but this is not my goal, as I wrote I want this to be preserved, but auto-hide programatically.
I noticed that the find box disappears if navigating away from the webpage, I tried to 'navigate away' by adding a #hash to the location.href but this didn't seem to work. I actually cannot navigate away, but maybe some similar hack could help?
$(window).keypress(function (e) {
return !(e.which == 102 && e.ctrlKey)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Using jQuery this code is correctly working in Firefox. But Chrome didn't generate event if you are using Ctrl+F shortcut. And you can't rewrite browser`s behaviors using JS. You can rewrite it if you will write the plugin for browser
This maybe a no brainer to you. but I am trying to figure out why keydown is not triggered in firefox upon an initial load.
$(document).keydown(function(){alert("test")})
I add the above code in my javascript and when I open my page and without clicking anything but pressing key. I can see that the key pressed is not cautch at all. However, after I click the background of my page then I press keyboard. I can see the key is caught then.
This doesn't happen in Chrome, only in Firefox.
Is anyone familiar with this by any chance.
Thanks
If I have a text page as described below. The call to $("#target").focus(); in the $() section in the header works just fine. I can also bind that command to events in a more realistic page.
However, if I open the chrome console and type $("#target").focus(); it does not change focus. If I run $("#target").val("something"); it changes the value on the screen, but it does not work with focus.
Obviously this isn't a critical problem, but I am really curious why this happens. Anyone have an idea?
<html>
<head>
<script src="jquery-1.9.1.js"></script>
<script>
$(function(){
$("#target").focus();
});
</script>
</head>
<body>
<input id="target" type="text">
</body>
</html>
You will realize that when clicking on the Chrome console, it will steal focus from any input or textarea control on the current page, and vice versa. That's because the Chrome console actually is implemented using the same HTML controls as any other HTML page, just with special properties which, for instance, prevent Chrome from inspecting the Chrome console recursively.
When you type a command in the Chrome console, i.e. in the input control that is part of the Chrome console, it will keep the focus. The Chrome engineers might have chosen to implement it differently, but in most cases the user will want to continue typing in the Chrome console after firing a command, so no command will release focus from the console.
Kind of possible way is: unfocus / blur your control. Scroll it out of View. Enter the Command to focus in the Chrome Console. If then the Website will scroll up to your Control you can be sure that the Focus Method works.
kind of hackish but works...
try to wrap your highlight code with setTimeout :D and before the timer expire click on the web page.
ele2 = $('#input')
setTimeout(function(){ele2.focus()},4000);