How to prevent Voice Over from reading unaffiliated HTML text (next div)? - javascript

I have an issue where drilling down into a text field with Control+Option+Shift+Down ends up reading more than what's currently inside of the text field. The Voice Over utility is concatenating an unaffiliated div, and I'm not sure if there's a way that I can specify a boundary. I don't want to read "Date Of Birth" when they're only editing the "Preferred Name" (see second screenshot)

Related

How to trigger tooltip on hover over floating label inside input element

I have a form where currently the label (span element) is separate from its input (text) field, but as part of a redesign it will move into the input field as a floating label (see jsfiddle below). However we also have a tooltip that shows on hover (onmouseover) over the label, and when the label moved into the input field the hover no longer triggers.
Obviously I could make the entire input field or the encompassing div trigger the tooltip or something to that effect, but that would get in the way of the actual input.
So I am looking for either a way to make it trigger on only the label text within the input field (wherever it may currently be, since it moves slightly based on focus), OR some way to integrate an icon into the input field that would be a static trigger point for the tooltip (which would still require some way of triggering hover on a specific element or limited area within the input field).
Is this even possible, or should I look for an alternative solution involving something outside the field?
This fiddle contains the basic structure and CSS to show what the field looks like: https://jsfiddle.net/xwoczh0a/
<div class="form-textbox">
<input type="text" class="form-textbox-input" name="x" id="x" aria-labelledby="x_label" placeholder=" ">
<span class="form-textbox-label" onmouseover="tooltip.show('Enter tooltip here');" onmouseout="tooltip.hide();" id="x_label" aria-hidden="true">Question goes here</span>
</div>
I hope this makes sense, happy to provide more details if not.

Show AngularJS Bootstrap Tooltip for client-side validation as soon as user leaves field

Note that I've already read Enable angular-ui tooltip on custom events and, while close, does not do exactly what I want.
Here is as far as I got:
http://plnkr.co/edit/12R5eIj2v8nEj8LNVKr1?p=preview
Need to somehow update the error message based on the actual error (my code just has the message for min length not being met). Also, would like to somehow pop up a different tooltip when they first enter just to provide some helpful advice while filling out the form.
Here is what I want (at a minimum):
A user clicks or tabs into a field, e.g., password, and begins typing. He only types four (4) characters and then tabs out of the field. Because four is less than our minimum of eight (enforced by ng-minlength="8" on the input) the tooltip should display to the right of the field.
This tooltip should remain visible until the user corrects his error; he should not have to leave the field for the tooltip to disappear.
If the user leaves the field, the tooltip should remain visible (until he revisits/corrects the error).
Other errors, such as the password being too long, not containing the right characters, etc. should be shown in the tooltip when applicable.
Let's say the user gets to 8 characters, but they're all lowercase (and the pattern requires mix of upper, lower, and numbers) -- the tooltip should then read "Your password must contain at least one of each of the following: lower case letter, upper case letter, and digit."
The way this is currently done w/baseline AngularJS validation is by adding something like <p ng-show="formName.password.$error.pattern" in addition to the <p ng-show="formName.password.$error.minlength" class="help-block">, etc.
Here are nice to haves:
The field that has an error (and thus, tooltip display to right) be shown with a red border.
For fields requiring an explanation, another/different informative tooltip is shown as soon as the field is entered; the user does not have to type anything nor does he have to leave the field before this tooltip should be shown.
This tooltip would simply explain what the user should be doing in that field, e.g., "Your password should be at least 8 characters and must contain at least one of the following: lower case letter, upper case letter, and a digit." The explanation is optional and not all fields would have it.
Please keep in mind that this, while similar to the error text, is not the same text. When there's an error on length, we'd say just that, e.g., "Your password needs to be at least 8 characters."
EDIT: Apparently it's not clear to one commenter that I've tried to do this myself and failed. In the link I posted (i.e., the "Enabled angular-ui tooltip on custom events"), there's an example tooltip-trigger that reads: tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}". The issue with this, as I commented in that question, is that the user has to click back to the field to see the tooltip. It should instead, to be intuitive, appear as soon as the user leaves the field.
It should instead, to be intuitive, appear as soon as the user leaves
the field.
So then use blur instead of focus:
tooltip-trigger="{{{true: 'blur', false: 'never'}[registerForm.password.$invalid]}}"
You can also use keyup to show it immediately while you are on the field but it's not so smooth since it keeps re-rendering (which can be alleviated a bit using ng-model-options debounce)

Is there a way to open the 'alphanumeric' keyboard with numbers by default?

I'm devlopping a web app using Phonegap and HTML5.
When focusing on a text input, I've been asked to open the 'alpha-numeric' keyboard with the 'numeric' keys displayed.
Is that even possible?
Telephone: <input type="tel" name="usrtel">
This opens up a alphanummeric keyboard. This could be any number you want, not only a telephone number :-)
The type "tel" is new and comes from html5. A overview about all input types can be find here: W3Schools
Edit from Mon. 1st of Sept. 2014, 4:30pm:
I'm editing my answer because of the answer Jonas Grumann has given. You should use the <input type="tel" just for numbers only. Like the type described: telephonenumbers for example. This input type will not recognize it, if the user enters decimal numbers.
If you want the user to enter decimalnumbers you have to do it with the here given answer "pattern" you should use them then like this:
HTML
<input type="text">
and JS (Please consider: These are commands for which you need jQuery/jQuery-mobile
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
And for the sake of completeness i'm going to quote the user that has given this answer here -> Force iOS numeric keyboard with custom currency pattern
The idea is simple. The input starts off and ends up with type="text",
but it briefly becomes type="number" on the touchstart event. This
causes the correct iOS keyboard to appear. As soon as the user begins
to enter any input or leave the field, the input becomes type="text"
once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input
that has already been filled out, the input will be lost (if it
doesn't validate). This means the user won't be able to go back and
edit previous fields. In my case, this isn't all that bad because the
user may want to use the calculator over and over again with different
values, so automatically deleting the input will save them a few
steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type
attributes of email, number, search, tel, and url. These will switch
the keyboard that is displayed. See the type attribute.
If there are more questions, let me know and i'm going to edit again.

Find position at which text was editted in input field

If I want to know when an editable field (say, an input text field or a contenteditable div), I know that I can use the keyup event.
However, I can only see what the new text is, and what the text was prior to the edit, but I would like to get some additional information about the edit.
For example, one case where this would be ambiguous would be if the input text was originally a and the new text was aa. Then:
It could be the case that the user put the cursor before the a, and then typed another a.
It could also be that the user put the cursor after the a, and then typed another a.
It could even be that the user highlighted the a, then hit Ctrl+V (with aa in the clipboard).
I would like to be able to distinguish all the cases. For example, if I could get information of the form "insert a at position 0" or "delete range 0-1 while inserting aa in its place" it would be perfect for my purposes.
Is it possible to get this kind of information?
You could 'diff' the text before and after an edit, however, this will not allow you to distinguish between all of the cases you have mentioned. The only mechanism I can think of is to monitor the cursor (or caret) position each time a keydown event occurs, as described in this answer:
Get caret position in HTML input?

How to take control/cursor to another text box

I have a page where you enter customer-id first and hit submit. That point it will validate the customer and if valid, comes back to the same page to enter quote number. Initially quotenumber field will be grayed out and can not be edited. My question is, after it comes back to the page, I need the cursor to go to the "quote number" text box instead of customer-id text box (currently it goes to customer-id text box). How can I solve this?
use javascript's focus() function or jQuery
in jquery it would be
$("#myinput").focus();

Categories

Resources