Input Box inside an iframe - javascript

I have an input box inside and iframe. If i type and press the back key to erase the text, the back key event is taken as browser back and goes to the previous page. What could be the cause.?

please tell which browser you have tested with.
My guess would be that you have focus outside the field? is there a script putting focus on the document containing ths input box in the iframe?

i even cann't raise same event. I press BackSpace in iframe, I press BackSpace in input, I press BackSpace in main page.
Which browser do you work with?
Is there any javascript code in the page?

This is such an old browser behaviour. Update your browsers. In worst case scenario you can block the default events for the input element, using a jS library to get a unified response en browser events.

Related

Prevent interpretation of onMouseDown to disable the blocking of text selection

To my knowledge the most common way to prevent text selection/copy/paste is to specify your own empty onMouseDown function.
Now from a user perspective, what options do I have (using Firefox or Chrome) to prevent the execution of this other function.
Disabling javascript is not an option in this case, I have to disable just the text selection blocker.
Unfortunately I could not find it anywhere in the nested sources of the page.

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 to Click (place Cursor Blinking) in a TextArea (textbox) using Javascript without using Mouse Click

I want to Click (place Cursor Blinking) in a TextArea (textbox) using Javascript without using Mouse Click.
After clicking in the textarea the Javascript code should continue to more steps.
The code should work from Console of Browser like in Chrome => press F12 => select Console tab.
Note: just focus(), element.Value='abc' or select() is not required. Please help. Thanks
Try this fiddle, you will get blinking cursor
$('textarea').focus();
You need to use this (.focus() on DOM elements)
document.getElementById("txtField").focus();
Update If you are creating server controls. For example:asp.net server controls then you need to specify ClientIDMode="Static" on input control
I have tried this in Google's page, its working (on Console) just for adding text to the Search-Textbox, but not places cursor blinking in it.
document.getElementById('lst-ib').value='abc'
sorry to Google, this is just to learn, i want solution for my own projects.
If you want textarea to be focused as soon as page is loaded, just do this:
<textarea rows="4" cols="50" id="textarea" autofocus></textarea>
add autofocus

Enable/Disable Android virtual keyboard with dummy textarea

I want to have virtual keyboard for jquery terminal, here is my test code: http://terminal.jcubic.pl/android.html
the plugin code is here: http://terminal.jcubic.pl/js/jquery.terminal-src.js (uncommitted)
For a moment it was working but it stopped, even then I run focus and blur on textarea the keyboard don't show up. The cursor is not in textarea. The focus/blur work when I run the page on desktop Chromium.
Anybody know why textarea don't have focus?
Sometimes the cursor is inside but the keyboard don't show up and there is no that green outline. Sometime it get focus but then blur. Virtual keyboard show up only when I click inside textarea. I can't find any code that may cause this and why it was working for a moment (but not exactly I wanted).
I've try:
$('textarea').blur(function() { return false; });
or call preventDefault when I click the terminal. (the textarea is my clipboard but I want to reuse it). I keep trying different things with no success.
I've solve the issue, two things about andorid I've found. You can't delay action that trigger focus on textarea/input it need to be direct call (stack of focus call need point to html/browser native action), and it's seems that you can focus (trigger virtual keyboard) only on native events, (for instance you can't focus on load).

How to open a new window/tab without user interfaction and without getting it blocked

I've an <input type="text" /> which shows search suggestions from some data source.
The problem occurs when the user is redirected to some URL and in a new window (i.e. window.open) on [ENTER] key press: the Web browser blocks the whole window, because it has been opened without user interaction.
Do you know any way of solving this problem?
What I've tried so far?
Open a new window by default and change its URL on [ENTER] key press.
Programatically click the input element.
Thanks in advance.
Solution
The standard (even though it's not implemented in every browser) event when pressing ENTER or RETURN with a form element or its children selected will be to trigger the submit event of it.
Automated Alternative
If you want this event to be called automatically you can do it with JavaScript:
/*Directly selecting the form by its formIndex*/
document.forms[0].submit();
/* --- */
/* selecting the form by ID */
document.getElementById('myForm').submit();

Categories