Edge browser populating multiple textboxes - javascript

I'm having some problems with textboxes in Edge browser. When I click on a textbox (regular <input type="text"), it shows some options I entered before. That's fine but when I select one, other textboxes gets affected. Here is a screenshot:
You see in this image, in the modal div, I selected Notebook and the textbox at the background also changed. They have different name and id attributes and also I haven't even picked anything yet on the modal, just hovering on the items in the dropdown already affects the textbox at the background.
What could be causing this? I've already checked several times that they have different attributes. Here is their markup:
This is for the modal:
<div styleName="field-container">
<label className={classes.label} htmlFor="termName">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="termName" id="termName" required autoFocus autoComplete="off" />
</div>
This is for the background:
<div styleName="field-container">
<label className={classes.label} htmlFor="name">Name:</label>
<input type="text" styleName="field-container__input-text field-container__input-text--long" name="name" id="name" required autoFocus autoComplete="off" />
</div>
This Edge dropdown show "Manage Personal Info..." at the bottom by the way.

Related

Find 'text' in Span and enter in input and click button.... jQuery

In Wordpress I have a 'single' template for a certain post type. One of the metas displayed on the page is an address which is displayed in a span.
Additionally I have a FacetWP template which returns other posts. There is a single 'facet' for location.
I need to take the address from the span and enter it into the input and effectively hit 'return' on the input. This will trigger a refresh of the results which will now be sorted according to their proximity to the address entered in the location input.
So the markup abstract is in effect this..
<span>1 main street, london, uk</span>
<input type="text" class="facetwp-location" value="" placeholder="Enter location" autocomplete="off" id="facetwp-location">
Does anyone know how I might achieve this?
UPDATE:
This is the FULL markup associated with the input. Ordinarilya user would begin typing in the area and a google list of addresses would appear. The user would select one and the facets would be triggered upon making that selection. Alternatively an address could be fully entered manually and the user may hit enter.
<div class="facetwp-facet facetwp-facet-location facetwp-type-proximity" data-name="location" data-type="proximity"> <span class="location-wrap"><i class="locate-me"></i><input type="text" class="facetwp-location" value="" placeholder="Enter location" autocomplete="off" id="facetwp-location"><div class="location-results facetwp-hidden"></div></span>
<input class="facetwp-radius facetwp-hidden" value="250" id="facetwp-radius">
<input type="hidden" class="facetwp-lat" value="">
<input type="hidden" class="facetwp-lng" value="">
</div>
Screenshot of page's markup;

Wrong keyboard focus order - a11y

I have created an application in React.js with satisfying all WCGA accessible guidelines. But currently I'm facing some issues like
The keyboard focus always starts from first interactive element (back
button) regardless of the caret/cursor position in the document.
To understand this issue, I am adding a portion of source code where the user can enter their first name and last name. I have also added a back button on the top left of the same page.
Please find the code below:
<section >
<button onClick={()=>this.goback()>Back</button>
</section>
<section >
<form className="form-example">
<fieldset>
<legend>User Details:</legend>
{this.state.errors && this.state.errors.length? <section>
{this.state.errors}
</section> : null}
<section className='input-fields'>
<label> First Name:
<input
type="text"
aria-label='First Name'
id = 'name'
aria-required="true"
onChange={this.onchangeHandler}
value={this.state.firstName}
name="firstname"
/>
</label>
<label> Last Name:
<input
type="text"
aria-label='Last Name'
aria-required="true"
onChange={this.onchangeHandler}
id='lastName'
value={this.state.lastName}
name="lastName"
/>
</label>
<button type="button" id='submit' onClick={()=>this.submitForm()}>Login</button>
</section>
</fieldset>
</form>
</section>
People with visual impairments can become disoriented when tabbing takes focus someplace unexpected, or when they cannot easily find the content surrounding an interactive element. This means when an user places the cursor at the "first name" field and presses the "tab" button, the focus is going to the back button (which is the first interactive element in the page), but it's expected to go to the "last name" field.
scenario
- An html page contains multiple interactive elements. A user with some visual disabilities places the cursor in an element in the middle of the page, and presses tab key to move the focus to the very next element.
Issue
- The focus is going to the top of the page (first interactive element).
Can anyone suggest a solution to fix this issue?

Text Input Box misaligned in chrome

I'm running into problems aligning an input text field, password text field across all browsers. Any work around?
Here is my code for defining the textbox
<input cssClass="ui-widget ui-corner-all required" id="username" size="50" tabindex="1" path="username" autocomplete="false" htmlEscape="true" cssStyle="height:30px;padding-left: 3px;"/>
Now the text input field is working fine in IE and firefox but it is flowing out from the div in chrome....Any work around?
You need to make sure in your CSS declarations that you either set your input fields to be 100% in width or less, so it's sized in relation to the container div.
Also, your HTML code has some errors when calling classes. It should be like this:
<input class="ui-widget ui-corner-all required" id="username" size="50" tabindex="1" autocomplete="false" style="height:30px;padding-left:3px;" />
Also, path and htmlEscape aren't valid attribute for input tags - see here: http://www.w3schools.com/tags/tag_input.asp

I want to use Jquery to live swap input field names

I have a webpage where I am using Jquery to add form fields dynamically and all is well. Below is a sample of how the fields are named. Basically when the user wants more fields then they hit a button and it inserts the two fields and increments the values of the next inputs and creates a container div surrounding the fields.
<fieldset id="dynamicField">
<div id="fieldID1"><ul><li>
<label for="headertext_1">Header Text</label>
<input id="headertext_1" name="headertext_1" size="70" value="My Header Text" />
</li>
<li>
<label for="blurblink_1">Link</label>
<input id="blurblink_1" name="blurblink_1" value="http://foo.bar" size="70" />
</li></ul></div>
<div id="fieldID2"><ul><li>
<label for="headertext_2">Header Text</label>
<input id="headertext_2" name="headertext_2" size="70" value="My Next Header Text" />
</li>
<li>
<label for="blurblink_2">Link</label>
<input id="blurblink_2" name="blurblink_2" value="http://bar.foo" size="70" />
</li></ul></div></fieldset>
Okay, so now what I need to add is a way for these fieldsIDs to be reordered - not only on the page, that would be easy enough, but I also need to rename the field names so that my backend server processing still works.
So for example:
If I have 1,2,3,4,5 different group of fields on the page I want to be able to click a few buttons to move 5 to this order on the screen and named correctly as well:
1,5,2,3,4
Thoughts?

How do I hide a child element on a hidden tab with Jquery, and keep it hidden until I unhide it?

Probably best to explain with an example:
<div id="tab-1">
<input name="1" type="text" />
<input name="2" type="text" />
<input name="3" type="text" />
<div>
<div id="tab-2">
<input name="4" type="text" />
<input name="5" type="text" />
<input name="6" type="text" />
<div>
I'm using the Jquery Tools "Tabs" tool. This toggles the visibility of the two divs above so that only one shows at a time.
The problem is as follows:
The user Switches to tab 2. This hides tab-1, and fields 1 through 3.
This also shows tab-2 and its children, fields 4 through 6.
The user takes an action on tab-2 that should remove field 2 from the now hidden tab-1. I'm using $('#field-2').hide(0);
This should hide field two, but does nothing since field two is already hidden. That's fine for now.
3.The user switches back to tab-1.
Actual result:
All three fields, including field 2, are now visible again.
Desired result:
Fields 1 and 3 are now visible, but switching to tab-1 does not un-hide field 2, since it was explicitly hidden by a function. Field 2 should stay hidden until explicitly unhidden.
I'm thinking I may be able to circumvent this by assigning a special css class to the field with display:none;, but I was wondering if there's a better solution to show/hide independatly of the tab the element is on without assigning extra css classes.
It appears to work if you actually change the element's display style, instead of using hide:
$('selector').css('display', 'none');

Categories

Resources