I'm giving a value to a textbox and then giving focus to it.
document.getElementById('textbox').value="abcd";
document.getElementById('textbox').focus();
Then, I am creating a keyboard event and trying to fire the CTRL+A key combination (trying to select the text inside the textbox) by writing the following code:
var myEvent = document.createEvent('KeyboardEvent');
myEvent.initKeyEvent("keypress", true, true, window, true, false, false, false, 0, 97);
document.getElementById('textbox').dispatchEvent(myEvent);
But the above code doesn't select the text inside the textbox.
How to select the text creating the keyboard event ?
You can't trigger browser keypress behavior with JavaScript simulated keypresses. You can only trigger your own function. What that means if that if you add a keypress event listener that checks if the a key is pressed and then does something, you can trigger that behavior, but you can't for example make the browser pull up it's "find" bar when you trigger ctrl+F. That would be a security issue.
The appropriate way would be to write your own function for selecting and fire it whenever you need it.
This should do what you're looking for: Live demo (click).
<input type="text" id="my-input" value="Some text.">
JavaScript:
var myInput = document.getElementById('my-input');
myInput.addEventListener('click', function() {
this.focus();
this.select();
});
var event = new Event('click');
myInput.dispatchEvent(event);
Related
I am trying to trigger a mouse click event programmatically using Javascript on a div, but only after the value of an input is updated, also using Javascript.
It is updating the value successfully but the mouse click event is not taking place.
Please note that the input is not contained inside the div that I am trying to click on.
Please also note that there are multiple inputs and the following code is inside a loop for all the inputs.
// input node reference
const inputElem = document.querySelectorAll("input[type='number']")[index];
// bind "change" event listener
inputElem.addEventListener('change', e => console.log(e.target.value));
// programmatically change the input's value
inputElem.value = 5;
// simulate mouse click
var someDiv = document.getElementById("root");
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
someDiv.dispatchEvent(clickEvent);
P.S. - This is for a chrome extension, to manipulate the inputs of a webpage, and those inputs require mouse click outside input (or enter key press), for the cart to update.
P.P.S - The console does say Appboy: Trigger event custom_event did not match any trigger conditions. All I know is this message is related to React JS. So this page possibly has React applied to the inputs that I am trying to manipulate.
Im sending keys to a input filter using sendkeys and supposed to be it will update the contents of the table, I check its screenshot and it placed the characters on the field. unfortunately after sendkeys, it doesnt trigger either keyup/keydown.
How to trigger keyup or keydown on casper?
Code:
this.sendKeys('input[name=\"filterString\"]', 'string');
casper.sendKeys() should have triggered the keyup and keydown events, because it uses native browser events which should be indistinguishable from user input in other browsers.
You trigger it yourself by keeping focus and then triggering those events:
this.sendKeys('input[name=\"filterString\"]', 'string', {keepFocus: true});
this.page.sendEvent("keydown");
this.page.sendEvent("keyup");
this.page.sendEvent("keypress");
For this you can use the underlying PhantomJS function page.sendEvent().
I want to add an event listener to the windowObj that on keydown, calls a function. I can not get this to work on the window object; however, I can get it working after a child of the window object (a button for example), has been clicked. I've also tried clicking on the window area around the button, thinking that maybe the window needed to be active, but this did not work. Oddly enough, this test worked when I changed "keydown" to "click".
The way I want it to work:
When the ScriptUI window displays, on keydown, a function is called.
Below is code of a simplified example of what I want to happen:
#target Photoshop
var w = new Window ("dialog");
var buttonPositions = w.add ("group");
var top = buttonPositions.add ("button", undefined, "Button");
w.addEventListener ("keydown", function (k) {handle(k)});
function handle (k) {
alert (k.keyName);
}
w.show ();
Displays when script runs
Alert box with key name displays on keydown
tl;dr: Set the active property of any control that accepts keystrokes and is a descendent in the registered element's hierarchy to true:
btn.active = true;
win.addEventListener("keydown", function (e) { alert(e.keyName); });
The Window object isn't designed to detect keydown events. This can be demonstrated by intermingling panel, statictext, and group elements with controls such as radiobutton, button, and checkbox. Pressing the tab key skips any elements that ignore keydown events, and sets the focus to the first control in line that accepts keydown events. The first control residing in the listener's hierarchy that receives focus will trigger your callback on the next keypress.
Per the Photoshop Scripting Reference (emphasis mine):
An active control is the one with keyboard focus - that is, the one that accepts keystrokes, or in the case of a Button, is selected when the user types Return or Enter in Windows, or the space bar in Mac OS.
Keydown events can propagate through a Window (or Panel, or Group element, for that matter) as part of the event registration and capture phase, but to trigger a keydown event, the actual target needs to accept that type of event.
function showDialog() {
var win = new Window("dialog");
var btn = win.add("button", undefined, "Cancel");
// Sets initial focus to a control that accepts `ev: KeyboardEvent`,
// and is a descendent in the registered `this: Window` hierarchy.
btn.active = true;
win.addEventListener("keydown", function (e) { alert(e.keyName); });
return win.show() ? 0 : 1;
}
More info at: event callbacks/listeners and control objects.
I have added change event on the input field so that whenever user enters the text into it, so other task should happen, it works but when i click outside the input field.I don't know whether it is default behavior or i am doing some thing wrong. I tried using keyup and keydown events and it works as expect.
Please suggest.
Here is my code:
$("#mobile-number").on('change',function(){
// some other code
});
The change event fires when an elements value changes.
For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
In other words, on an input, the change event fires when the element loses focus, not when you type, and that is the default behaviour.
That's why there are key events as well, and on modern browsers you can catch most changes to an input with the input event
$("#mobile-number").on('input',function(){ ...
Yes, it is the desired behavior.
Change Event
The change event is fired for , , and
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
Depending on the kind of form element being changed and the way the
user interacts with the element, the change event fires at a different
moment:
When the element is activated (by clicking or using the keyboard) for and ;
When the user commits the change explicitly (e.g. by selecting a value from a 's dropdown with a mouse click, by selecting a
date from a date picker for , by selecting a file
in the file picker for , etc.);
When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or ).
Try using input event:
$(function() {
$("#mobile-number").on('input', function() {
$("#copy").val(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type='text' id='mobile-number' />
<input type='text' id='copy' readonly/>
Try this:( If i really understand your problem )
jQuery(document).on('change', '#mobile-number', function() {
// some other code
});
for type event:
jQuery(document).on('keyup', '#mobile-number', function() {
// some other code
});
You should provide your selector to the .on function:
$(document).on('change', '#mobile-number', function() {
// some other code
});
When a user was focused on a particular element when they pressed the tab key, I want to execute a particular function. But I don't want to this function to execute unless that particular element had focus when the tab key was pressed.
Is there a way to to tell what element had (has?) focus from the keydown event itself? Or should I set a particularElementHasFocus property in response to onBlur and onFocus events on that element?
You can use document.activeElement to get current focused element.
or
use
following code
var particularElementHasFocus ;
$('input, textarea, button').focus(function() {
particularElementHasFocus = this;
});
$('input, textarea, button').blur(function() {
particularElementHasFocus = null;
});
Using jQuery it could be done by testing the .focus of the element in question. With standard JS you can use document.activeElement - https://developer.mozilla.org/en-US/docs/DOM/document.activeElement