I'm making an AutoSuggest widget for a website, which works in the way that when an user writes something in input text box the div with suggestions is displayed and an user can navigate through it by mouse or by up and down arrows. Each word is suggested separately (not like in Google suggest where it looks on the whole phrase.
I have a problem with Google Chrome input box as when I'm pressing up or down arrow there is a default behaviour of browser - jump with carret to the end or beginning of the text box (like with Home or End buttons). There is no such effect on Firefox or Internet Explorer. How could I disable this effect?
I'm returning 'false' from the event handler function and also used a function from here http://www.javascripter.net/faq/canceleventbubbling.htm but still carret is jumping on Chrome...
Edit: same effect on Safari...
Have you tried preventing the default behavior?
window.addEventListener('keydown', function(e) {
e.preventDefault();
...
}, false);
Not exatly a true solution for a question but I've done a workaround by using this functions
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
and catching the carret position before event (or not exatly before as when keydown event is fired the carret is still on good position) and then setting it back after event.
Related
I'm trying to set focus and place the cursor in a text box and bring up the keyboard automatically when I pop up a modal dialog. I don't want the user to click anywhere. This works fine everywhere except on mobile Safari.
I tried focus(), touchstart, timeouts, direct and indirect event generation, etc. with jQuery with no luck. Does anyone have any ideas?
Try to generate a click event after setting the focus
I have a tablet html app. Some pages have <input> and <textarea> together with many other elements: links, menus, texts, ...
If I don't press any <input> or <textarea> everything works ok
As soon as I press one input element, the soft keyboard pops up (as expected).
After entering some text and hiding the keyboard, the keyboard pops up again everytime I click anywhere on the webapp (even in non-focusable elements)
This totally ruins the experience, as you are forced to use the web app with the keyboard always shown.
I have tried many different approaches to manipulate the input focus without any success, like calling blur(), focus() and related methods on the focused component, containers, window ... but seems nothing but reloading the page resets the keyboard state to keep hidden again until a focusable element is tapped.
My experiments:
Checked that pressing outside of the <INPUT> / <TEXTAREA> causes the focus to be removed: onblur() gets called, and document.activeElement returns NULL.
Also tried to manually blur() everything in the document after an onchange is triggered:$("input,textarea").blur() .
Tried to manually giving the focus() to a non-interactive element with a TABINDEX (hacky):
<div id="dummyfocus" tabindex="0">
$("#dummyfocus").focus()
I checked that the dummy element in fact receives focus, the input/textarea unfocuses, but even in this case, the problem persists.
In Android or IOS everything works as expected: Keyboard will not auto-show if no <input> or <textarea> is focused.
Any advice? Any funky microsoft-proprietary css tag I haven't heard about? :)
I have similar issue, after some digging find out that issue reproducible on Microsoft Edge browser( used in win10 uap as rendering engine).
When clicked anywhere active element becomes body element and for some reason (maybe bug) keyboard gets activated, so I added tabindex=0 on container div which is nested in body, so when clicked outside of any focus-able element that container becomes activated element and keyboard popup isn't fired.
for checking which element is activated I used this code
document.body.addEventListener('click', function() {
console.log(document.activeElement);
});
Hope this helps.
I managed to resolve this by adding the following if you are still interested. Added a dummy control to take the focus then change the focus when clicking away from the text area.
$("body").click(function () {
$("#radioDummy").focus();
});
$("#MyTextArea").click(function (e) {
e.stopPropagation();
});
It seems the issue lies in the touchstart event when using the keyboard on Windows 10. When you hide the keyboard (e.g. pressing the close button (x) on the keyboard), the input field still has focus. And when you press anywhere else, the keyboard pops up again. However, pressing anywhere for a longer time (long press) will remove the focus from the input, and not show the keyboard again. This got me thinking, that the problem could be solved hooking up the touchstart event, and prevent the event propagation, and remove the focus from the input.
I created a global #HostListener inside my main AppComponent that listens for touchstart events. When the body is clicked, stop the propagation of the event, and call document.activeElement.blur() (Loose focus).
#HostListener('document:touchstart', ['$event'])
globalTouchEvent(event) {
if (event) event.stopPropagation();
document.activeElement.blur();
}
I have created a Stackblitz that you can test using a Windows 10 tablet.
I'm using Firefox and I'd like to know how I can determine which function on a site that uses Javascript interrupts the normal operation of Spacebar key, which is supposed to scroll down a whole page (and in combo with Shift scoll up a page), and super-hijack it to work normally. How do I do that?
I don't want to disable Javascript on the whole site or everywhere, so Noscript is not a solution. I'm looking for disabling a single function.
In Chrome:
Open DevTools, choose Sources tab, on the right side expand Event Listener Breakpoints, here you choose Keyboard, and select keyup or keydown. Then use the website, it'll break on keyup or keydown, so you just have to press spacebar to find out where it's handled.
use Jonathan's answer to find what the issue is, but this will, as you call it, "super-hijack" it (probably):
function cancelUtil(e){
e.stopImmediatePropagation();
}
window.addEventListener('keydown',cancelUtil,true);
window.addEventListener('keypress',cancelUtil,true);
window.addEventListener('keyup',cancelUtil,true);
When adding onmousedown and onmouseup events to a div I am noticing that it seems by default if I do not click outside the div and attempt to drag over it again with the mouse, the browser automatically picks up the div as if by some default drag and drop thing. What is this and is there some way to prevent this?
I am using Firefox, HTML5, and again I notice the issue when adding mousedown events to an empty (not sure if the same thing would happen on a populated div). The cursor turns into a closed hand and the browser automatically drags a faded copy of the div.
Edit: I found an exact duplicate and prevented the issue by using
event.preventDefault ? event.preventDefault() : event.returnValue = false;
I have a page intended for desktop and mobile that has buttons allowing the user to touch and hold them to make adjustments. This jsfiddle illustrates the behaviour.
The problem is that on my Android phone, the div acting as a button gets highlighted with focus. It will then no longer respond to touch events until the focus has been taken away from it (by pressing another button) and going back to it.
Is is possible to clear or disable the focus of elements?
Would e.preventDefault be an option?
you can try $("#id").blur(), or simply focus on something else like $("#otherid").focus()