This works on Chrome, FF and Safari. In Edge when I left click in the input field, it seems that on the mouseup event the input loses focus and the cursor leaves the input to some random element above. I can tab into this input and I can right click to bring up the copy/paste menu, click elsewhere on the page, and the cursor stays in the input.
<div class="card" ng-repeat="prod in product" ng-if='ngCart.itemInCart(prod.id)'>
<div id="{{prod.id}}" count="{{prod.count}}" class="card-info col-md-12" ng-click="showInfo(prod.id)">
<div ng-if="prod.count == 0" class="info-form pink-active col-md-12">
<div ng-if="prod.id == '11'" class="col-md-12">
<input type="text"/>
</div>
</div>
</div>
</div>
Any idea how I can troubleshoot this? Again, it works perfectly in other browsers. Client is using Edge, so I have to fix this.
UPDATE: If I left click in the input and move the mouse outside the input before I release the left button, the cursor stays in the input, again the mouseup event is what's breaking this. Thanks!
Related
I've implemented angular translate and it's working well so far.
I do have one problem with the following code though:
REGISTER_RULES_ACCEPT : ' I have read the Rules and hereby accept them.<span class="registration-important">*</span>',
Html Implementation:
<input id="checkbox" type="checkbox" name="checkbox" value="rules"><a translate="REGISTER_RULES_ACCEPT"></a></input>
It displays correctly and everything, when going over the link with my mouse it shows the link in the bar. However when I click it, nothing happens. I can right mouse or mid mouse click it and open it in another tab, but left clicking it does nothing. Any idea whats the problem here?
You already have anchor a tag in translation then just bind it in span or paragraph element in view code. So, your template code can be:
<input id="checkbox" type="checkbox" name="checkbox" value="rules" />
<span translate="REGISTER_RULES_ACCEPT"></span>
Plunker Example
Hi i am new to keyboard navigation, here is my angular application after clicking on that checkbox when i use the keyboard tab it should take to that button , right now i am using tabindex but it is not working.
<div class="row well" ng-if="actionRequired">
<label for="checkbox" class="bg-warning" style="background-color:#ddd;margin-left:32px;">
<input type="checkbox"
id="checkbox"
ng-checked="false"
ng-change="checkActions()"
ng-model="action.complete"
ng-disabled="contacts.length == 0" >
{{checkListEmergencyConfirmLabel}}</label>
</div>
</div>
here is the button code :
<button type="button" role="button" class="btn btn-primary" ng-disabled="!reviewComplete()"
ng-click="setReviewComplete()" tabindex="1">{{commitLabel}}</button>
Set tabindex=1 for the input type=checkbox and tabindex=2 for the button.
As MDN notes,
The tabindex global attribute is an integer indicating if the element
can take input focus (is focusable), if it should participate to
sequential keyboard navigation
Update: You heard it wrong, see W3C spec
The tabindex content attribute allows authors to control whether an
element is supposed to be focusable, whether it is supposed to be
reachable using sequential focus navigation, and what is to be the
relative order of the element for the purposes of sequential focus
navigation. The name "tab index" comes from the common use of the
"tab" key to navigate through the focusable elements. The term
"tabbing" refers to moving forward through the focusable elements that
can be reached using sequential focus navigation.
The tabindex attribute, if specified, must have a value that is a
valid integer.
I have an Angular page with a grid-like view. Inside each row is an input element:
<div class="grid">
<div class="group" ng-repeat="(key, value) in groups | groupBy: groupingFunction>
<div class="row" ng-repeat="row in value">
<input type="text" ng-model="row.name">
</div>
</div>
</div>
I want to tab through all the input elements in order. This more or less works, except that Angular will redraw the elements when I tab out of the first input element, resetting the focus to somewhere outside the grid. When I quickly press tab several times, I can usually reach the 5th or so element before that happens, so the tab order itself is working. My question is, how do I prevent Angular from (seemingly unnecessarily) redrawing part of my grid?
I tried delaying the view updates for the input, as suggested in this question, but the redraws still happen. So, it looks like something else is causing them. Any suggestions on how to find out what, would be appreciated.
I've been using ionic's angular framework to create a comment list and a comment input box on the bottom of a mobile web page. I am trying to set up a function so that if a user clicks on the comment box or button it throws up a login modal before letting them comment/continue. I ended up disabling the input initially so that it doesn't bring up the keyboard which hides/pushes my modal login view.
The issue I'm running into is that the clickable area seems to be the entire div and button except for the input text area (which is most of the hit area). How can I get it to do the checkAuth on the input text hit area while input is disabled... or conversely, if I move the checkauth to the input onclick event, how can I enable the input and not have it bring up a keyboard.
<div class="bar bar-footer item-input-inset" style="position:fixed; " ng-click="checkAuth()">
<label class="item-input-wrapper">
<input type="text" placeholder="comment" ng-disabled="true">
</label>
<button class="button button-small" ng-disabled="true">
Submit
</button>
</div>
Unless you need to support IE 10 and earlier, you could try setting pointer-events: none on the input when it's disabled.
I have the following
<div id="border" style="width:100%; border:8px solid #FFF">
<div id="menu" style="width:250px; float:left;" >
Some menu
</div>
<div id="content" style="padding-left:270px; width:520px;" >
Main page content
</div>
</div>
This gives me a left aligned menu and the content to the right of it, all surrounded by a border.
On all browsers including IE8 it displays correctly.
But on IE7 the content only starts below the menu, and leaves a big open space to the right of the menu.
I have searched all kind of solutions and tried all kinds of combinations of right, left, none for float. clearing left right both. It always displays different on the browsers.
Any help is appreciated.
Michael
Remove the padding on your content div and set it to float left.
You might have to put <div style="clear: left"></div> after it