Chrome Vox Shift Alt Left arrow reads all following elements on page on following structure. Now keeps focus on first input, I am trying to move from Input to label, and focus goes on asterisk span and label both. And it reads next input (email input box)and span also. Is there any fix for this?
<span>* </span>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br/>
<span>* </span>
<label for="email">Name:</label>
<input type="text" name="email" id="email">
Your description is very confusing to answer. But this is how I understood it... You don't want the chromevox screen reader to announce the asterisk.
So what you can do is add this to the span.
<span aria-hidden="true">* </span>
Now I'm assuming you are using an asterisk to signify something is required... so you should add this to the input
<input type="text" name="email" id="email" required>
You need to add required to the input.
Now you can also control the flow of how the screen reader reads elements using tab index. But typically people don't use tab-index of a positive integer so it would need to be tab-index="0"
Hope This helps!
Related
I have a input field that I like to compare to several regex.
If the input is correct, the method should be executed.
I think I'm doing it completely wrong.
<p class="control">
<input ref="barcode" id="BarcodeInput" v-model="barcode" v-on:keyup.enter="processBarcode" class="input" type="text" placeholder="Barcode" autofocus />
</p>
<p class="control">
<button v-on:click="processBarcode" class="button is-primary" >Go!</button>
</p>
method:
if (document.getElementById("BarcodeInput").value == "31334866-001"){
Now i can put the barcode in the textbox and i can use the methode.
If i try:
if (document.getElementById("BarcodeInput").value == "^\d{8}-\d{3}$"){
the Barcode: 31334866-001 doesnt work.
So you'll want to first use a v-model for the barcode input linked to your data. This will save you the trouble of getting the element. Then do your validation in the processBarcode function.
If you want to clear the box, just clear the v-model variable stored in data (with two-way binding, changing one changes the other).
I am trying to pass some content in the textbox using the following:
driver.find_element_by_xpath('path').send_keys(value)
Apparently nothing is getting passes.
Similar issue with clicking button:
driver.find_element_by_xpath('path').click()
This is also not working, in the code i could see
display:none:
<li style="display:none">
</li>
</ul></div>
<div class="row form-group">
<div class="col-sm-12 form-group">
<label for="Username">Username</label>
<input autocomplete="off" class="form-control" data-val="true" data-val-
required="User name is Required" id="Username" name="Username" type="text" value="">
As per the HTML you have shared and #Sighil pointed out the style attribute display: none is part of the previous <li> tag which must not affect the Username field. To pass some text to the Username field you can use the following line of code :
driver.find_element_by_xpath("//input[#class='form-control' and #id='Username']").send_keys("Dimple Mathew")
It may be possible you have to induce a waiter for the Username field to be interactable and in that case you have to induce WebDriverWait as follows :
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[#class='form-control' and #id='Username']"))).send_keys("Dimple Mathew")
Use explicit wait statement before you use sendkeys or click. As per my understanding element is not visible while click or sendkeys.
For your reference visit Explicit and Implicit Wait Docs
I was having a similar issue not to long ago, try this:
js= "document.getElementById('Username').value = '" + str(YOURVALUE) + "';"
driver.execute_script(js)
It worked for me, hope this helps.
I'm trying to setup a pattern validator with the following regex :
^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$
Try Regex here
That should allow me to get 1 to 3 digits, and then a decimal part of maximum 2 digits, and that should allow empty values as well.
The problem is that either my input is of type text and the validator is rejecting my input (any input since it's not considered as a digit I believe); or the input is of type number and without step="any" my input value is rejected if I have a decimal input (while the regex seems to be working on simpler values), and with step="any" it seems my regex is not working at all, allowing whatever value because of the step.
<form (ngSubmit)="onSubmit()" #bottleUpdatePriceForm="ngForm" >
<div class="form-group" *ngFor="let bottle of bottleArrayToUpdate; let i = index">
<label for="bottlePrice">{{bottle.name}} : </label>
<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
[pattern]="pricePattern"
[(ngModel)]="bottleArrayToUpdate[i].price">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<!--(click)="bottleUpdatePriceForm.reset();"-->
</form>
EDIT : adding my component code for regex binding
private pricePattern = /^(((0|[1-9]\d{0,2})(\.\d{2})?)|())$/;
Be it text or number I don't really care, I just need the pattern to work on my input... Any insight or something I am missing ?
Here is a working example in a plunkr : https://plnkr.co/edit/znVaS7?p=info
You can switch the input line in the plunkr to see the different cases :
<input type="text" class="form-control" name="bottlePrice" autocomplete="off"
<input type="number" class="form-control" name="bottlePrice" autocomplete="off" step="any"
Unrelated to the main issue : Is there any way to call the form reset from the component rather than directly in the template ?
==> bottleUpdatePriceForm.reset();
I was wondering, this is just for bonus.
Thanks a lot
This is not a direct solution for the not working regex, but this works with the same purpose. So remove the pattern and just change your input with max and min instead:
<input type="number" class="form-control" name="bottlePrice"
autocomplete="off" step="any" max="999" min="0"
[(ngModel)]="bottleArrayToUpdate[i].price">
I'm trying the pattern attribute for the first time, and I can't get it to work (my browser does support it, though).
Right now I have:
input type="text" pattern="[a-zA-Z0-9]{6}" name="formName"
The first problem is that is doesn't notify me if it's blank; the second problem is that if I do type in something, it won't accept it. I want it to accept alphanumeric characters and be exactly 6 characters is length. I tried it with forward slashes and a few other variations.
As Duikboot already pointed out, the right way to do it is:
<input type="text" name="formField" pattern="[a-zA-Z0-9]{6}" required>
The required attribute causes the validation to fail, when the field is empty.
The pattern attribute defines the regex to test against, when the field is not empty.
(Your initial pattern seems to work fine.)
More info can be found here.
This is simple enough so as not to require a demo, but nonetheless you can find one here.
Works for me here : http://jsfiddle.net/barbuslex/nR6yg/
<form>
<input type="text" pattern="[a-zA-Z0-9]{6}" name="formName" />
<input type="submit" value="OK" />
</form>
I use Google Chrome
You simply need to add the required attribute to your tag, which will notify the user if they attempt to send the form with that very field blank.
<input type="text" pattern="[a-zA-z0-9]{6}" name="formName" required>
Try this code its working perfectly
<html>
<body>
<form action="demo_form.asp">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
</body>
</html>
Enter invalid country code and click submit button. Then You can get a message (title="Three letter country code")
I am making an app for iOS, Android, BB, and also any other devices. I am working with webapp-net.
In my app, I have a fieldset containing different text fields. So this is what I have:
<fieldset>
<ul>
<li><input type="text" id="cc" placeholder="Card Number" autocomplete="off" onkeypress="return isNumberKey(event)" maxlength="23"/></li>
<li><input type="text" id="chn" placeholder="Holder Name" autocomplete="off" /></li>
<li><input type="text" id="cvc" placeholder="CSC" autocomplete="off" maxlength="4" /></li>
</fieldset>
For CSC, I need it to be only for 4 numbers, but I can't change the width. I also want to be able to create a pop up/dialog box, so when you click on CSC a box will appear with a little information about CSC.
I tried, but I can't even change the width. So if you know how to fix this problem please let me know!
Try using size attribute :
<input type="text" maxlength="4" size="4" />