I'm working on an HTML5 mobile app (using regular jQuery, not mobile), which implements a custom autocomplete list that appears below a textarea. The user selects an option from the list, the word is autocompleted, and the user continues typing as usual.
The problem is that the user taps outside of the textbox to select an item from the autocomplete, so the textarea momentarily loses focus. Since focus() is deactivated in the android browser, I can't immediately re-focus and retain the caret's last position as I usually would.
Is there a workaround that would allow me to re-focus on a textarea, preserving caret position as regular blur() and focus() calls would?
Edit:
Sources of underlying assumption: mentioned here: https://stackoverflow.com/a/10243010/832607 and here:
http://ambrusmartin.wordpress.com/2012/08/30/soft-keyboards-in-android-iphone-phonegap-applications-when-we-call-focus/ (Already tried solution mentioned in link)
Instead re-focusing the textarea I'd recommend trying to not lose the focus in the first place. I'm achieving this when preventing the default action on mousedown.
Here is the jQuery, assuming list is your list of options and all options have listEl class:
list.on('mousedown', '.listEl', function(e) {
e.preventDefault();
});
Related
I've created a js virtual keyboard that is able to update the value of a textarea. On mobile, you can trigger the 'magic floating caret' by holding down on a textarea or holding any key on the native keyboard. Because my textarea input mode is set to none in order to hide the native keyboard and show my own, I'd like to know if there is a way to trigger that second effect using my own keyboard?
My understanding is that I can trigger an event using execCommand or jQuery's trigger function, but neither are able to do what I'd like.
Thanks for input!
magic cursor article link news18
I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
I'm working on keyboard accessibility. I have a flash object which sits inside a page, and to stop the focus getting trapped inside it, I've added tab listeners which talk through ExternalInterface to some JavaScript functions.
The JavaScript looks for the next available element with a tabIndex and calls focus() on it. So far so good. But if the plugin is the last tabbable item on the page (or first when reverse-tabbing), there is no element to switch to. Normally this would set focus to the browser window, so I'd like to keep that behaviour.
Hence my question: Is it possible to programatically give focus to the browser's chrome? Even better if I can mimic both forward and backward tabbing. Also I'd like to avoid adding extra tabbable components before/after the flash if possible, unless I can make them effectively invisible to both the mouse and keyboard.
Came across this in my own search for a similar answer. If you want to release the focus on the currently focused element, use document.activeElement; If you want a fallback in the off chance its not supported, use focus on the parent element of the document. This should support all known browsers, as far as I know:
var activeElement = document.activeElement;
if (activeElement) {
activeElement.blur();
} else if (document.parentElement) {
document.parentElement.focus();
} else {
window.focus();
}
Setting the focus to a dummy anchor with no text content, at the top of the document, seems to work:
document.getElementsByTagName('a')[0].focus();
http://jsfiddle.net/4NA5u/1/.
As some of you may know already, Internet Explorer's onchange event is fundamentally broken prior to version 9. Instead of triggering when a change occurs, it triggers when the input field loses the focus and has changes.
This lead to various workarounds for checkboxes and radio buttons ("use onclick instead") and text fields ("use keyup instead").
However, I'm having that problem for a file input, and I can't figure out what I do to be notified that a new file has been selected, right after it did, and not when the user clicks elsewhere. I can't attach myself to a mouse event because it's not related to the mouse; and I can't attach myself to a keyboard event because it's not related to the keyboard either.
I'd be willing to use IE-specific stuff if it can solve the problem.
Additional infos:
I use jQuery 1.6 and the live method to attach the event.
$(".upload").live("change", function() { /* stuff here */ });
Use the onFocus event, combined with a check to ensure that there is a value. This works because after the user selects a file and the OS file selection dialog box is removed, focus is returned to the input element.
Scenario: I'm trying to intercept paste events inside a textarea/input text, and filter the content being pasted.
Webkit/IE are handled rather well, as I can attach code to the onpaste event, and then read from the clipboard what is being pasted. Plenty of examples around.
Gecko is trickier, because as far as I know it isn't possible to read the clipboard content on Firefox (unless somebody knows a workaround for that?)
I just use the input swap trick for that.
Opera is being annoying tho. I can trap CTRL+V and SHIFT+INS, but there's no onpaste event.
Not to mention any sort of clipboard interaction, apparently.
So, my question is:
Can I detect if the user clicked on paste in the context menu on Opera? Is there any other way to detect the event?
EDIT:
Thanks everybody for the answers - they all add a good input, even if there's no definitive solution.
Having to choose, I'll pick the only one that tried to address the original question, and that would probably work if it wasn't too much of an hack to even try.
Notes for those that have my same problem (input filtering):
it is possible to capture content being dragged: mouseup + setTimeout does the trick everywhere almost perfectly.
without flash, there is probably no solution bar polling. Even with flash, it's not a completely solid solution either. Too much effort to support 100% of the cases.
I ran into this last year. In short, no.
I ended up using an onchange handler and filtering the content after it's already been pasted into the text box.
You can intercept the paste with jQuery using the bind('paste', function() {});, compare string before and after pasting and apply your formatting.
The following was tested in IE7/FF3.6/Chrome/Safari 5
$("#textarea").bind('paste', function(e){
// Do whatever you needed to do with the code here.
});
Live Example http://jsfiddle.net/VSrTg/2/
Edit An approach would be something like this:
$("#textarea").bind('paste', function(e){
var oldText = this.value;
setTimeout(function() {
// Compare oldText to $("#textarea").val() and format accordingly.
}, 1000);
});
Edit 2 Given your revisions to your original post, if you're worried about the giant market share that is Opera, you're going to have to monitor the value of your textbox with a setInterval() and compare it against itself for changes.
Ultimately there will always be a way around your script, even the above example is susceptible to simply dragging text from another text box (or the address bar) into it without triggering the paste event defined above.
I would like to point out DOJO menu widget that is creating context menus perfectly in different browsers. http://www.dojotoolkit.org/reference-guide/dijit/Menu.html#dijit-menu
What you can do is that detect paste event in browsers that are supporting it and override context menu in browsers that are not supporting this event like opera.
Once you create your own context menu then you can add copy paste menu item or create context menu similar to the default using css.
Edited
Some browsers might not allow us to fetch clipboard content, in this case we can always revert back to flash for borrowing some of its features that are cross browser. See couple of links I posted in comments.
Its complete implementation might have more issues than anticipated but it is possible and we can always give it a try (I will for sure).
The answer to the question is a simple no. The main browsers that have no paste event are recent versions of Opera and Firefox 2. Given that there is no paste event, you need to find an alternative event or set of events to detect a paste from the context menu as it actually happens. You can add handlers for every event there is (I've done this) and you simply get nothing in the relevant browsers when a paste is triggered from the context menu by the user.
This only leaves polling the text input's value regularly, which is not the same thing. You could keep track of keypresses and observe in your polling code that the text input's value has changed by some means other than keyboard input and do a diff, but that's hacky and unreliable.
I use the setTimeout for paste events. But for context menu select nothing seems to work(as stated above). I bind a mousemove to the input's form which fires the update function. Then unbind/bind so they don't stack up.
This handles the context menu select and dragging value to input field.
If your form is small, say with only one input field and the mouse will not land on it after selecting from context menu, bind to the form's parent or document. Sure, it has to wait until the mouse moves but that is the general user action after selecting from context menu.
Works fine.