I need to make a simulated click on input field using javascript in browser console.
The site isn't mine.
I use the code:
document.getElementById('bets-stake-amount-1').click();
I have to click the element with this ID: bets-stake-amount-1 .
I think that only option is to click with mouse button.
I have tried to change the type of the field but it not work.
<div class="bet p-1 ng-star-inserted">
<div class="bet-icons pull-right">
<a class="bet-remove ng-star-inserted">
<span class="fa fa-times" title="Rimuovi">
</span>
</a>
</div>
</div>
<div class="combis mt-2 mb-2">
<app-betslip-input grouping="1" class="ng-star-inserted">
<div class="radio p-1 ng-star-inserted">
<div class="flex-row">
<div class="input-group flex-col-7">
<input autocomplete="off" class="form-control text-right" tabindex="1" type="text" id="bets-stake-amount-1" readonly="">
<span class="input-group-addon ng-star-inserted">€
</span>
</div>
</div>
</div>
</app-betslip-input>
</div>
The output is undefined .
In IE you have to confirm ActiveX after 1st console command (in local page tested), next time it works.
In FF & Chrome works without problems, but not sure how you recognize "pass" result.
For example calling onclick in Chrome reports this error:
document.getElementById('bets-stake-amount-1').onclick()
VM49:1 Uncaught TypeError: document.getElementById(...).onclick is not a function
at :1:48
And without brackets return null as there is no method to call.
In IE you can see even focus by this command document.getElementById('bets-stake-amount-1').focus() and in FF you cannot get focus or cursor in at all. Also Chrome no change after focus, but it can show focus after entering by tab or mouse click.
According to documentation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text, the input field responds to two possible events: input and change.
Okay, but how does this work you may ask?
Suppose that you have the following input field
<input value="0.005" autofocus="" name="price" placeholder="Amount">
All you have to do is to set a value (because this field responds to value change)
document.getElementsByName("price")[0].setAttribute("value", "10")
Then trigger the input event like this
document.getElementsByName("price")[0].dispatchEvent(new Event('input', {bubbles:true}));
This way it works to programatically launch events on input fields.
Triggering the event without setting a value will not work, because remember, the input field reacts to changes of it's value. If there is no change, no event will happen.
Hope my answer will help others.
P.S.: Always remember to read the documentation carefully. Most of the times the answer to our questions is right there :)
Have a good day!
You can simulate a click to an element (by ID) with this code
document.getElementById('elementID').click();
other option is to use this code (https://stackoverflow.com/a/2706236/7584019)
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
Related
I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip".
This is the HTML for both of them:
<div class="sect-txt" style="margin-top:100px;" id="op">
<h1> Date of the trip </h1>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check In </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-in" name="checkin" required />
</div>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check Out </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-out" name="checkout" required />
</div>
<a href="#four">
<div class="btn-nxt" style="position:relative;top:137px;">
NEXT
</div>
</a>
</div>
<div class="sect-txt">
<h1> Number of travelers </h1>
<input type="number" class="f-2" placeholder="Adults" name="adults" required/>
<input type="number" class="f-3" placeholder="Children" name="childrens" required/>
<a href="#fif">
<div class="btn-nxt-b">
NEXT
</div>
</a>
</div>
And this is a link to the page in action: http://www.eliteware.co/92/form/
Your button is not focusable because you are trying to hide it when it has to receive focus again. Check the following link for more information about why this happens. Basically, you are hiding the object that is supposed to receive focus when validation is needed. If you don't want this to happen, you can probably do validation before hiding, or unhide the object if validation fails.
https://stackoverflow.com/a/28340579/616813
Also, do remember, if an error log exists, that is the first point to check if you receive an error. That is the whole point of error log, to give you a starting point to debug.
Or as Andreas said, "Fix the damn errors in the console... :)".
Edit:
Because it was killing me, I tried to reverse engineer your application. All it took was comparing the textbox that was working, and the one that was failing to find the problem. Really, that easy.
aria-required="true"
Your "Adults" and "Children" input fields have this property. You need required="true" instead.
Check your css and update that. And no, I have no idea why "aria=required" and "required" property behave differently. It is something new to learn for sure.
I have a form where i am showing validation error below each input field.
<div class="form-group m-0">
<input type="text" class="form-control" name="address" placeholder="Address">
<i class="form-group__bar error-red address"></i>
</div>
when Ajax response have errors regarding to the input field, I shows them here <i class="form-group__bar error-red address"></i>.
What i want if that when the error shows and the user clicked on the input field i want to disappear the error message.
Is there any library for this kinda things, Cause there are many fields in the form, It will be good where we can use library for every form and field.
you can use .focusin() function. What you have to do is just give common class to each <i class="form-group__bar error-red address"></i>.
like if your common class for each <i class="form-group__bar error-red address"></i> is "form-group__bar" then you can use focusin like this.
$(".form-group input").focusin(function() {
$(this).siblings(".form-group__bar").hide()
});
this will hide error message on focus of input.
For more you can search for focusin and focusout events.
use this code no library needed just jquery which you already use
$("input").focus(function(){
$(this).siblings("i.error-red").hide();
});
I can't find a solution for this in anywhere. Can someone help me ?
<input type="text" id="myText" oninput="alert(this.value);"><br><br>
<div onclick="document.getElementById('myText').value='123';NowCauseTheEvent,Plz !">
change
</div>
Basically I need to know how to programatically raise the event input after I change the value programatically as well. (something to place on the "NowCauseTheEvent,Plz" after the document.getElementById('myText').value='123'
ty !
BTW, this is not about custom event, but native event and I will REALLY appreciate to stop to vote for close this one because THIS IS NOT A CUSTOM EVENT !!!!
This will work across browsers and trigger the event you require.
<div onclick="document.getElementById('myText').value='123';document.getElementById('myText').oninput()">
change
</div>
Use the following in your placeholder:
document.getElementById('myText').oninput()
This works for me on Firefox and Chrome but fails on IE11.
<input type="text" id="myText" oninput="alert(this.value);"><br><br>
<div onclick="document.getElementById('myText').value='123'; document.getElementById('myText').dispatchEvent(new Event('input'));">
change
</div>
I have a search form. When user submits form, ajax request is sent to the server. When the response comes, I update found items count value, but JAWS reads previous items count value.
To get JAWS read new content I use aria attributes and role="status". But JAWS still doesn't work as expected.
What I've tried:
Getting screen reader to read new content added with JavaScript,
aria-live and JAWS, ARIA Live Regions and etc.
What am I doing wrong?
HTML
<form class="search-form">
<label class="keyword-search-input-label" for="keyword-search-input">
<span class="hide">Search</span>
<input class="form-control" type="text" id="keyword-search-input" name="keyword"/>
</label>
<button id="clear-field-button" type="reset">
<span class="hide">Clear Search Field</span>
</button>
<button id="search-button" type="submit" aria-describedby="number-found-items">
<span class="symbol-label">Search</span>
</button>
</form>
<div id="number-found-items" role="status" aria-live="assertive" aria-atomic="true" aria-relevant="all">
<span id="number-found">0</span>
items found
</div>
JS
function updateNumberFound(value) {
$numberFound.text(value || 0);
}
jsFiddle
To reproduce the problem try to focus on search input, type some text and press search button, while JAWS is on.
The correct way to do this is to use a role="log" region that is inserted into the document when it loads and is off screen. Then to append the text that you want announced to that region when updates occur.
I have modified your fiddle to include the a11yfy library's code which does this: https://jsfiddle.net/17mkL2n5/1/embedded/result/
jQuery.a11yfy.assertiveAnnounce(value + ' items found');
I have tested this on OS X with VO, Windows with NVDA and Windows IE 11 with JAWS 14 and they all work correctly.
I have this HTML code which simulates a dropdown multi-checkbox
<div>
<div class="select">
<span>Select something</span>
</div>
<div class="no-display select-list">
<div>
<label class="unchecked" for="value1">
Value1
</label>
<label class="unchecked" for="value2">
Value2
</label>
</div>
</div>
</div>
And javascript:
$(".select").live("click", function () {
$(".select-list").toggleClass("no-display").focus();
});
$(".select-list").live("blur", function () {
$(this).addClass("no-display");
});
But in Firefox and Chrome, the blur event doesn't work, but works in IE9.
I want, when clicking outside select-list element, to close it (means make it invisible).
I used blur event after assigned focus on that element.
Could you show me the good approach to do that ?
Thanks
Try using on("focusout", instead of on("blur"),, because the blur event doesn't always get triggered.
Try trapping a click on the document to hide the menu. The clicks from the menu will also propagate to the document so you'll need a work around for that (you can check event.originalEvent for example).
Demo here
Set attribute tabindex=-1 on the select-list div(read about "tabindex" property).