I'm trying to simulate an actual tab key press in JavaScript. I don't want to focus on the next element or anything like that, I just want to make it seem like the tab key has been pressed.
The reason why is because I am building a form JavaScript class where I want to be able to use the enter key just like tab. If someone is using a native BROWSER autocomplete, I need to fire the tab key to capture the selected autocomplete response. If I just move to the next input it won't capture their autocomplete selection and leave the field blank.
Any thoughts?
I don't think it's possible; an article about DOM events here ...mentions that firing an event doesn't trigger the default result of the user action, for security reasons; the script should not be able to simulate user interaction directly. You will have to simulate the behavior the keypress causes (such as focus on a field), instead of trying to actually simulate a keypress. You probably won't be able to interact with the browser's native autocomplete functionality, unless the browser explicitly provides a means for you to do so.
Edit:
See also: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete] (Autocomplete HTML attribute)
Related
I need to execute some code every time the user writes in a textarea. Currently, I am listening for a keyup-event, but the latest years predictive keyboards has become normal on mobile devices. This does not trigger my event handler. It also does not get triggered when the user uses right click to paste text into the textarea.
Is there any event that let's me execute code also when the user changes the content of the textarea without pressing keys?
The solution for me, since I was using AngularJS for this project, was using $scope.$watch. This allows a function to be triggered every time a variable in the scope changes, and will trigger also when the user is using a predictive keyboard.
I have a canvas app where I handle window's keyup and other events. This works fine. However, now I've created a popup div with a textarea in it, and I don't want my keyup handling to be active when the textarea is focused (or when the popup is visible).
I could set a bool isPopupVisible and check for that in my keyup handling, but it strikes me that much more elegant would be to just use the standard focus management of HTML. So I tried handling the canvas's keyup event rather than the window's, but now the problem is that the canvas never receives focus (not even if I click on it) so it doesn't receive any key events. Apparently most HTML elements can't receive focus.
What would be a good way to resolve this?
Edit: It now occurs to me that what I want is in effect a modal dialog box, which HTML doesn't natively support. To support this modality, it's normal to implement it manually with a bool as I initially planned. Standard HTML focus doesn't provide for that, even if I could get the canvas to receive focus. Because the user can switch focus back to the canvas by clicking on it even when the popup is still visible (undesirable).
So I guess I withdraw my question.
Scenario:
I have an web app where I need to capture all keyed input to the page in a central location. My first solution was to continually give focus to a text box so all focus would go through there. That works amazingly for desktop browsers, but causes the undesirable effect of causing the soft keyboard on mobile browsers to always be visible. Since my keyed input is coming from an external source, I don't want the keyboard visible until I request it. Since there's no direct way (that I've found) to do this, I was trying to give constant focus to a control that doesn't cause the keyboard to show. I was unable to find a control that didn't cause the keyboard to show, but would fire one of the key events (keydown/keyup/keypress).
Does anyone have a suggestion as to how I can catch all keyed input without displaying the soft keyboard?
Note: I can have a different solution for desktop and mobile if necessary.
Any help is appreciated!
Ok, so the answer was so simple, I can't believe it took me so long to get to it.
If you make a textbox readonly, it doesn't show the keyboard, but still fires key events. This allowed me to accept input from the external source without showing the keyboard. I also added a keyboard toggle button that simply hid the readonly textbox and showed the regular one.
If my application would have been different, I could have just added and removed the readonly attribute and applied focus again to have the same effect.
Thanks for all replies, including the ones that got deleted.
var keyedinput = "";
window.addEventListener('keydown', function(event){keyedinput += String.fromCharCode(event.keyCode)}, false);
keyedinput will contain the contents of the keyed input from the external keyboard-like device. Simply reference it as a global variable when needed. If there is an enter/esc key or and "end" key (sequence?) you can just check the corresponding keyCode to launch an action with the contents of the variable instead of appending to it.
I have an interesting question, i hope..I have a textarea in my form..when a user comes to enter values in it it displays some cached values in an autocomplete format..thats fine..I want to call an ajax function after the user selects such a cached value in it..so that the ajax call should pass this selected value..so my question is on which can i get the final selected value, so i call ajax at that time,... i tried with onblur etc, but not worked..
help please..
thanks in advance...
If the user chooses by clicking, you want a 'click' handler on the element the user is selecting (or a containing element).
If the user can select in other ways, eg by the keyboard, then you'll need to observe other events as well.
You mean you want to detect if the user selects a value the browser's native Autocomplete lookup, instead of typing it in themselves?
I'm certain there is no event to catch this.
The only workaround that comes to mind is analyzing the keypress events the user makes in the input field. If the keys entered do not match the full string that is in the text field, and no onpaste event was fired, it stands to reason that the value was selected from an Autocomplete.
This is going to be tough to implement, though, and by no means 100% reliable.
As Pekka said above, there will likely be browser-specific events to handle for this kind of functionality, but it is possible.
For IE, check out Why does the javascript onchange event not fire if autocomplete is on? for a reference to the "onpropertychange" event within IE.
For Firefox, it looks like others have solved it through a combination of onBlur and onFocus (see FireFox capture autocomplete input change event).
If you do come up with a cross-browser solution, please let us know!
I'm using jQuery to alter things when a user enters text into an input. This works fine with .keydown() or .change() when typing.
I'm unable to capture an event when the user selects from the browser stored inputs for that field. This is the dropdown that appears when typing or on click when the element already has focus and the browser has previously entered items for this input.
Anyone know what event I can use to capture the population of the input by the browser from a stored list of previous inputs when the user clicks on one or uses the keyboard?
EDIT: As requested an example would be https://launchpad.37signals.com/highrise/signin (the Username and password, not openID). This hides the label for pasting, selecting from previous inputs or typing. I want to emulate this.
Thanks,
Denis
There's not one event triggered. As you said, it depends on how the user is using it : keyboard or mouse.
If I can remember well, keyboard approach triggers nothing. You should bind on the blur() event.
The mouseup should work for the mouse approach.
But whatever since you can bind several event at once thanks to
$("#id").bind("blur mouseup", function(){
alert("bound !");
});
The change event will fire as well, but when the element looses focus.. (like it normally does)
You would have the same issue even without the browser cache, if someone use the right-mouse-click -> paste of something they had in the clipboard ...
What about mouseup event? did you try it on the input?