We Keep Coding

IOS Bluetooth Keyboard - Inputs - Tab Event

Background:
I have a textarea. I capture the Tab key event when the user is typing, and I insert a Tab character (\t) and prevent the browser from focusing on the next input.
This works without issue on Mac and PC, on all browsers.
Problem:
When using a Bluetooth keyboard attached to an iPad, this doesn't work. The document registers the tab key event, but as soon as I focus on the textarea, all tab key events are ignored and not sent to the browser. I have tested with text inputs as well, and see the same result.
Example: https://plnkr.co/edit/NQvxijj3ISZ0B48fSHvi?p=preview
Simple listener:
$(function(){
$("body").bind("keydown",function(e){
$("#bodyLog").append($("<div/>").html(e.keyCode));
return e.preventDefault();
});
});
When you have the body selected (NOT THE TEXTAREA), the tab key event is registered and the number 9 appears. Any other key event appears as well.
When you have the textarea selected, all keydown events are registered on both the body listener and the textarea listener... EXCEPT the tab key.
If anyone has a solution, I would be eternally grateful.
EDIT
I have "fixed" the issue by watching for 5 spaces, then converting that to a tab character.
I have researched this and can only figure that iOS does not want to release control of the TAB key when focused on inputs/textareas. I have tried visiting sites like Google Docs to see if they have gotten around it, but they force you to download the App rather than allowing you to edit files inside of Safari on iOS. I am guessing it is because iOS wants to control the tab key entirely. I have tried Chrome on iOS, but it functions the same, so I would say this is not a Safari issue, but an iOS issue.
A possible, but untested, workaround is to code an entire <div> to act like a textarea, and then replace the textarea with the div. Since the tab key works on all other elements, it should in theory work, but it would require quite a bit of Javascript and CSS to make an element act like another.
EDIT 2
I have discovered that using Option+Tab allows the tab key to be captured in the textarea. I don't feel that is satisfactory though. When I am typing a paragraph on a normal keyboard, I don't type Option+Tab, I just type Tab. As far as I can tell there is no way to capture the Tab key alone inside a textarea.

You can try using this library in order to have these events:
previousbuttonclick
nextbuttonclick
Then when you detect the element next to textarea is focused you come back to your textarea and insert whatever you want.

I believe this is known problem with tabs in iOS. I found similar question on stackoverflow. Just add this hack before your code:
var oldAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(eventName, eventHandler){
oldAddEventListener.call(this, eventName, function(e) {
if(e.target.id === "textarea" && e.keyCode===9){
e.preventDefault();
}
eventHandler(e);
});
};
Please check, it should work. Example

How can I copy text from some site which disable right click, and also select text?

How can I copy text from some site which disable right click, and also select text?
I mean I cant select any text from that site, and also I cant right click on that site.
Do I have to Inspect Element and Find that text?
or is there any easier way?

In Chrome or any of the popular modern browsers, open Developer Tools by pressing F12 and then click on the magnifying glass icon (or equivalent icon in other browsers) to turn on inspect mode. Move to the content within the web page and point to the specific portion of text that you want to copy. The HTML code corresponding to the pointed area will appear in the docked Dev Tools window. Double click on the HTML code to copy the content you need.
Alternatively, you can save the page as a text file in Internet Explorer and then you can get just the text within the web page in the text file. In IE, choose File > Save As and in the dialog box that opens up, specify the Save as type as Text file.
Also you could try the site after disabling JavaScript in your browser.

For doing so, you have several methods:
Disable JavaScript
Remove the event handler(s) (if you are a developer)
Use DOM

You could use latest Intenet Explorer.
Caret Browsing is a new feature introduced in Internet Explorer 8 and later. With this feature enabled, you can use the navigating keys on the keyboard, select text & move it around within a webpage .
You can select and copy snippets of text as short as a single character by using only the keyboard. Other content types such as tables or images can also be selected and copied.
Enable Caret Browsing in Internet Explorer
To turn on Caret Browsing in Internet Explorer, press F7.
It can be enabled on a per tab basis or for all tabs and windows. Moving the cursor within the text of a web page is like moving the cursor within the text of a Microsoft Word document. To select text, hold the Shift key & press the arrow keys.
Instead of using a mouse to select text and move around within a webpage, you can use standard navigation keys on your keyboard : Home, End, Page Up, Page Down & the arrow keys. This feature is named after the caret, or cursor, that appears when you edit a document.
Reference here.

Javascript/Cordova keyboard control

I'm trying to get access to the mobile keyboard in a cordova app so that while the user is signing up, they can just jump to the next input on the keyboard. For example, on iOS native apps, you have access to change the "return" button to "next" or "go."
I've looked at the Ionic-plugin-keyboard but as far as I can see it doesn't allow you to do what I'm trying to do. Is there a way I can change those buttons with js/is there another plugin I can do that with?

Here are some potential resources for keyboard control:
link 1
link 2
link 3
In summary: On most devices it show a "next" button when adding the attribute tabindex to each input, incrementing in order. Otherwise it is generally suggested to set an input as the browser's default focus, or to detect when the user clicks "ok" and move the focus after that event (key code for "ok"/"enter" is 13).

Is there any way to detect a shift-click or control-click when a user clicks the browser action button?

This is a bit of an odd question, but basically, I'm trying to display different pop-up menus to a user depending on how they click my browser action button (the icon to the right of the Omnibar). One way that I thought of doing this is by detecting whether the user is clicking it normally or holding shift as they click it. Is this possible?
If there is no way of doing this, I would appreciate any suggestions as to how to display different menus to the user with a single browser action button. I would rather not make the user select from two options in the actual pop-up window - a single button press would be preferable.
Thanks
Edit: I'm thinking the best way to do this may be to check for the Shift key being pressed using Javascript as soon as the pop-up window is displayed, then display a menu according to that. I'm going to try that and report back.

I've tried for 2 hours, but didn't find a solution, too.
I think it's not possible to capture the click event, which opened the popup.

How to regain focus for an ajax drop-down element in IE?

I have a drop down element which is rendered as a usual HTML element. The drop down element submits itself using ajax on every change. The problem is that I need to implement a specific tabbing order for the page. In order to prevent frustration of losing information when ajax call comes back, I added a screen-disabler which prevents any user interaction until ajax call comes back. It also worth noting that the next tabbing order element is sometimes disabled depending on the value of the drop-down.
Now, everything works fine on Firefox and Chrome because 'change' event is fired when a user leaves the field: he presses tab, screen disabler pops up and asks to wait a bit, and after ajax is finished my javascript handles the tab order of the next element correctly.
However, here comes IE8/7 with its own problems. In IE 'change' event for drop-down is fired differently then on Firefox / Chrome. It is fired on every single change of the value. Hence, after the screen disabler fades off, I need to focus back to the same drop down menu again because the user might have used UP or DOWN arrow keys to change the value and he might be willing to go up/down the drop-down menu again.
I tried using Primefaces' and jQuery's features to run certain javascript when Ajax callback come back. However, it did not work well. Sometimes the drop-down got focused but straight afterwards it lost focus. I tried using javascript's timeouts, however, the drop-down element somehow gained 'not full' focus: pressing a 'Tab' key jumped to the top of the page and pressing UP or DOWN arrow keys used to jump out of the drop-down instead of changing its value.
My final solution (sadly, still not acceptable) was as follows (id is the id of the 'select' element):
if (jQuery.browser.msie || jQuery.browser.opera) {
interval = setInterval(function (){
if (document.activeElement.id != id) {
document.getElementById(id).focus();
} else {
clearInterval(interval);
}
}, 500);
}
This gets the 'full' focus and the TAB and UP/DOWN arrows keys behave as expected. However, on a bit slower computers using UP/DOWN keys to change the values queues up too many intervals and sometimes the website becomes unusuable. The focus just keeps jumping back to drop-down and user has to wait for 10 or more seconds for intervals to be cleared.
So, I would like to ask for a better solution for this problem.

I think you should use onblur event of dropdown instead of onchange, it will be the right solution, if I've understood you correctly.