I am filling up a login form using
document.getElementById('i0116').value = email;
document.getElementById('i0118').value = password;
document.getElementById('idSIButton9').click();
Now the problem starts when form is identifying that the value is not filled by any key event, I mean the placeholders remains there even if I fill the form and on submit it says fields are empty.
I was trying to fix it by firing a keypress event on input box before I fill the value. but I am not able to do it.
I tried :
var target = document.getElementById('email');
var evt = document.createEvent("Events");
evt.initEvent("keypress", true, true);
evt.view = window;
evt.altKey = false;
evt.ctrlKey = false;
evt.shiftKey = false;
evt.metaKey = false;
evt.keyCode = 0;
evt.charCode = 'a';
target.dispatchEvent(evt);
also instead of "Events" I tried "UIEVENTS" and "KEYEVENTS" none of them helped , I am using chrome browser.
Just got the hang of what you really are seeking to achieve. You can clear off the placeholder value onClick() and restore the placeholder value using onBlur(), something like the following
function clearPlaceholder(id){
document.getElementById(id).placeholder = "";
};
function restorePlaceHolder(id, placeHolderText){
document.getElementById(id).placeholder = placeHolderText;
};
<input id="10116" placeholder="email" onClick="clearPlaceholder('10116')" onBlur="restorePlaceHolder('10116','email')">
<input id="10118" placeholder="password" onClick="clearPlaceholder('10118')" onBlur="restorePlaceHolder('10118','password')">
Is that what you were looking for?
My Issue was resolved using:
var element = document.getElementById('idTxtBx_SAOTCC_OTC');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
It was knockout js, because of which just setting the value of element was not working.so I was trying to keypress.
chanage event triggers "textInput" for knockoutjs, Instead of just setting .value attribute.
Related
I have an element on the page that looks like:
<textarea id="note-content" rows="4"></textarea>
when I try to write some jQuery to add some text to it:
$('#note-content').val('hi')
The button to "submit" the value is still greyed out.
I've tried
function setKeywordText(text) {
var el = document.getElementById("note-content");
el.value = text;
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
el.dispatchEvent(evt);
}
setKeywordText("test")
as a way to "simulate" sending keystrokes to the browser, but that doesn't seem to work either.
any thoughts?
You can do that by javascript
<script>
function changetext(){
document.getElementById("note-content").value = "hi";
}
<script>
It should def. work. Plus what exactly did you mean by browser simulation?
Am i missing something?
It appears this problem is occurring because your button is disabled.
To solve this you'd remove the disabled attribute using jQuery.fn.removeAttr, like this:
$("#button-id").removeAttr("disabled");
Add this solution it to your vanilla JavaScript code, like this:
function setKeywordText(text) {
// disable button
var btn = document.getElementById("button-id");
btn.disabled = false;
// set input value
var el = document.getElementById("note-content");
el.value = text;
// create and dispatch the event
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
el.dispatchEvent(evt);
}
// run the function
setKeywordText("test");
Good luck.
So I am trying to autofill the discount code section on a page. The class I am calling is button before. If I try to press enter it isn't applying the code, because the value wasn't saved somehow. However, filling it out manually addes this attribute to the class: after entering code manually. The site I am trying to apply discount on is luisaviaroma.com you can try the FF25 code, if you are interested in helping me with some code. I figured out that simply adding a space after the code my hand is solving the issue, is there a way to make this space press automated to (inside of js)?
function test() {
var element = document.querySelector("div[data-attribute='promo-code-input']")
var input = document.querySelector("input[name='promo-code-input']");
//element.setAttribute('class', 'InputText__baseCls___Hg_ik4cV2- InputText__focus___5q7tEpbHwI InputText__filled___1s5BW_63Y3');
element.classList.add("InputText__filled___1s5BW_63Y3");
console.log(element)
input.focus();
setTimeout(function () {
input.focus();
input.value='FF25';
let event = document.createEvent("HTMLEvents");
event.initEvent('change', true, false);
element.dispatchEvent(event);
element.blur();
}, 300)
input.select();
Although there is a KeyboardEvent the spec recommends input for text inputs.
In this case setting the bubbles attribute to true does the trick.
function test(val) {
var input = document.querySelector("input[name='promo-code-input']");
var inputEvent = new Event('input', {
bubbles: true,
})
input.focus();
input.value = val;
input.dispatchEvent(inputEvent)
console.log(input)
}
On click placeholder disappears, on blur it reappears, but if double-click happens instead of 1 click placeholder just disappears forever, turning off double-click default doesn't help either. Is it somehow possible to treat double-click as normal click? Or is it supposed to destroy placehoder?
var input = document.getElementsByTagName("input")[0];
input.onclick = function() {
p_holder = this.placeholder;
this.placeholder = "";
}
input.onblur = function() {
this.placeholder = p_holder;
}
input.ondblclick = function(e) {
e.preventDefault();
}
<input type="text" placeholder="text goes here">
I think this might be what you are looking for.
Comments are in the source code.
var input = document.getElementsByTagName("input")[0];
// Store original placeholder
var p_holder = input.placeholder;
// Remove on focus
input.onfocus = function() {
this.placeholder = "";
}
// Restore on blur
input.onblur = function() {
this.placeholder = p_holder;
}
<input type="text" placeholder="text goes here" />
If you have any questions please leave a comment below and I well get back to you as soon as possible.
I hope this helps. Happy coding!
It is not double click, but two single clicks which are causing this issue, because on the second click, the value of p_holder will be set to ''.
To prevent that, you can check for the value first:
input.onclick = function (){
if (this.placeholder !== '') {
p_holder = this.placeholder;
this.placeholder = "";
}
}
By the way, if you just need to deal with placeholder, you actually don't need to manipulate it. The browser automatically removes it when some value is inserted into the input, and restores it when the value is removed.
I'm trying to send characters to an input element based on user actions.
I'm trying to use KeyboardEvent with dispatchEvent but whatever I do, it doesn't work
For example:
let keyEvent = new KeyboardEvent();
keyEvent.key = 'a';
keyEvent.keyCode = 'a'.charCodeAt(0);
keyEvent.which = event['keyCode'];
keyEvent.altKey = false;
keyEvent.ctrlKey = true;
keyEvent.shiftKey = false;
keyEvent.metaKey = false;
keyEvent.bubbles = true;
Not sure if this is correct, but I have dispatched it as follows:
document.querySelector('input').dispatchEvent(keyEvent);
document.activeElement.dispatchEvent(keyEvent);
document.dispatchEvent(keyEvent);
DEMO
If I first focus the input before clicking the button nothing really happens. Any suggestions what might go wrong here ?
Actually, due to security reasons, dispatching a KeyboardEvent to an input element does not generate the action you expect.
The KeyboardEvent document makes it quite clear:
Note: manually firing an event does not generate the default action
associated with that event. For example, manually firing a key event
does not cause that letter to appear in a focused text input. In the
case of UI events, this is important for security reasons, as it
prevents scripts from simulating user actions that interact with the
browser itself.
So the dispatchEvent stuff simply won't work.
Alternatively, consider manipulating the input element directly.
In base of your code here is a eventKeyboard, but:
- after dispatch keyevent, wath's next?, who is listener?
- ... i cant underdstand at all
document.querySelector('button').addEventListener('mousedown', (e) => {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
console.log('send key');
/*let keyEvent = new KeyboardEvent();
keyEvent.key = 'a';
keyEvent.keyCode = 'a'.charCodeAt(0);
keyEvent.which = event['keyCode'];
keyEvent.altKey = false;
keyEvent.ctrlKey = true;
keyEvent.shiftKey = false;
keyEvent.metaKey = false;
keyEvent.bubbles = true;
console.log(keyEvent); */
var keyEvent = new KeyboardEvent("keydown", {
bubbles : true,
cancelable : true,
char : "A",
key : "1",
shiftKey : true,
keyCode : 81
});
document.querySelector('input').dispatchEvent(keyEvent);
document.activeElement.dispatchEvent(keyEvent);
document.dispatchEvent(keyEvent);
console.log(keyEvent);
});
I have a Controller,
that change some values in the "then" of a barcode scanner.
First thing it set the code, then set a "disabled" variable, and then focus an input.
.then(function (barcodeData) {
// Success! Barcode data is here
$scope.selectProdotto = barcodeData;
$scope.txtDisabled = false;
var pageElements = document.querySelectorAll('input[type=number], input[type=text], textarea');
var first_element = pageElements[1];
first_element.focus();
});
The input that i want to focus is ;
<input class='input' type='number' ng-disabled="txtDisabled" />
Now the problem is that the input is still disabled after i changed
$scope.txtDisabled = false;
so when i do .focus() it fail.
After my function finish my input is correctly enabled.
So im asking when are variables applied to DOM ?
How can i wait for the input to be ready and enabled to focus ?
did you try
.then(function (barcodeData) {
// Success! Barcode data is here
$scope.selectProdotto = barcodeData;
$scope.txtDisabled = false;
$scope.$apply();
var pageElements = document.querySelectorAll('input[type=number], input[type=text], textarea');
var first_element = pageElements[1];
first_element.focus();
});