I'm using jQuery 1.7.2 and jqm-datebox 'stable'.
Code:
<label class="ui-input-text ui-hidden-accessible" for="date">Date</label>
<input jql id="date" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" type="text" value="" name="date" data-role="datebox" data-options='{"mode": "calbox", "calStartDay": 1}'></input>
When I click on the little icon, though, the calendar box appears too much to the left, as in picture. This is particularly evident on a mobile device.
If I reduce the width of the window it goes even further left.
The element.style (especially the left attribute) appears to be calculated on the fly, depending on the width, but I can't manage to find where, neither in the css, nor in the js.
I saw this question, kinda similar to mine, but I don't find it applicable to my case.
How should I go to make the box show in its entirety?
From the docs:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode":"calbox", "centerHoriz": true}'>
The centerHoriz option will get you what you want.
Related
I'm creating custom radio / checkbox icons by adding a pseudo-element on a label element with the :before css rule. I've added aria-hidden to the label element, but VO on iOS is still reading the pseudo-element.
I understand that some screen readers will ignore an aria-hidden attribute if the element is providing additional context (this is the case for label elements, since they provide additional information about a connected input element). To get around this I've added a aria-label attribute, but again, this is ignore by VO on iOS. This seems to fix the same problem for other screen reader, browser, and device combinations (Narrator and IE / Edge for example).
I've also tried to add a child span or i element to the label and add the :before css rule and aria-hidden attribute to that, but VO on iOS is still reading the pseudo-element.
Does anyone have any advice for having the screen reader read the correct content?
My basic approach is below (note: won't work in a jsfiddle since I'm not loading my font-face).
You can also view the first example here:
http://uatwww.surveygizmo.com/s3/4102902/Basic-Radio
<input type="radio" id="radio1" value="1" name="example" />
<label for="radio1" class="custom-icon" aria-hidden="true" aria-label="example 1">Example 1</label>
<input type="radio" id="radio2" value="2" name="example" />
<label for="radio2">
<span class="custom-icon" aria-hidden="true" aria-label="example 2"></span>
Example 2
</label>
<input type="radio" id="radio3" value="3" name="example" />
<label for="radio3">
<i class="custom-icon" aria-hidden="true" aria-label="example 3"></i>
Example 3
</label>
<style>
input[type=radio] {
opacity: 0;
position: absolute;
border: 0;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
input[type=radio] + .custom-icon:before,
input[type=radio] + label .custom-icon:before {
content: "\26aa";
}
input[type=radio]:checked + .custom-icon:before,
input[type=radio]:checked + label .custom-icon:before {
content: "\26ab";
}
</style>
I think the problem is that you are giving confusing instructions to both the browser and screenreader. You have an invisible input with CSS content attached to it, which is then associated to a label which is aria-hidden but also has an aria-label. You’re definitely going to get inconsistent interpretations of that markup across different browser/screenreader combinations.
I’ve used Heydon Pickering’s custom control method successfully on a bunch of sites with no problems. It seems like a simpler version of what you’re aiming for. It accessibly hides the input from everyone except screenreader software, puts the CSS content on a span instead of the label or input. He doesn’t use any ARIA, but if more recent versions of VoiceOver announce the CSS content you can just put aria-hidden on the span and let screenreaders treat the label and input as normal.
Concerning radio1, the W3C says:
If the current node is hidden and is not referenced by aria-labelledby or aria-describedby, nor referenced by a native host language text alternative element or attribute, return the empty string.
So as long as you reference an element even though it has the aria-hidden attribute, it will be spoken out.
If you want to give an alternative text for an element, you have to set the aria-label attribute on the element:
<input type="radio" id="radio1" value="1" name="example" aria-label="example 1" />
<label for="radio1" class="custom-icon" aria-hidden="true">Example 1</label>
Pseudo elements have different beheviours on browsers, and as you can see the alternative text for :before elements will be given even though the associated element is marked with the aria-hidden attribute.
My Angular application doesn't show me keyboard, when i click on input for the first time. Second click and other shows it.
I don't have ngTouch and any function on inputs.
<div class="input-wrapper">
<input type="email" name="login" tabindex="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="form.userData.login" placeholder="{{'LOGIN_OR_EMAIL' | translate}}" required>
</div>
Nothing special in html
if you have
-webkit-user-select:none;
user-select:none;
in your css remove them.
I use jquery mobile for build a Phonegap application. I create any radio sets like this :
I want to checked a radio in a switch case!
switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... }
Can you help me?
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too.
Assuming you have markup similar to this:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" />
<label for="radio-1">Arial</label>
<input type="radio" name="thefont" id="radio-2" value="verdana" />
<label for="radio-2">Verdana</label>
<input type="radio" name="thefont" id="radio-3" value="tahoma" />
<label for="radio-3">Tahoma</label>
</fieldset>
The script to switch to Tahoma would be:
$("[name='thefont']").prop( "checked", false ).checkboxradio( "refresh" );
$("#radio-3").prop( "checked", true ).checkboxradio( "refresh" );
The first line unchecks all boxes and the second checks the tahoma box. In jQM you must refresh the checkboxradio widget after changing values.
DEMO
Managing the iOS keyboard for HTML <input> forms (used in UIWebView) is well known, i.e. <input type="tel"></input> for telephone numbers.
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
But I was wondering about the keyboard's blue 'Go' button.
Sometimes the keyboard has a blue 'Go' button, sometimes the keyboard has a gray return button.
Is there any opportunity to control this behavior programmatically?
Update 2020/2021
As Cameron Cobb pointed out,
Safari Mobile supports the new HTML attribute enterkeyhint since version 13.7 ~ Sept. 2020 (https://caniuse.com/mdn-html_global_attributes_enterkeyhint).
The following values are possible (https://mixable.blog/ux-improvements-enterkeyhint-to-define-action-label-for-the-keyboard-of-mobile-devices/):
<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
Original Answer
Aha...
The 'Go' button is only shown, if the <input> tag is inside a <form> tag (and the form tag has an action attribute).
So, if you access your form elements afterwards with i.e. JavaScript, you can omit <form> tags.
'Go' button:
<form action="..." method="...">
<input type="text"></input>
</form>
'return' button:
<input type="text"></input>
The important part is that the form tag has an action property. (action="#" is a noop.)
<form>
<input type="text" />
</form>
<form action="#">
<input type="text" />
</form>
There is a better and more "straight forward" way of changing the enter button text. Use the attribute enterkeyhint in the input tag like in the example shown below.
<input enterkeyhint="go">
You can find more documentation on the Mozilla site here.
I'm attempting to re-style a vertical group of radio buttons, and the new theme I add to one of them shows up but the theme I remove from another/the rest doesn't go away.
My goal is to change theme of the selected radio button (the related controls, anyway) to make it stand out more when selected.
<div data-role="content">
...
<fieldset data-role="controlgroup" id="showChooser">
<legend><h3>Which show are you attending?</h3></legend>
<input type="radio" name="activeShow" id="activeShow1" value="1" />
<label for="activeShow1">
<h2>Choice 1</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow2" value="2" />
<label for="activeShow2">
<h2>Choice 2</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
<input type="radio" name="activeShow" id="activeShow3" value="3" />
<label for="activeShow3">
<h2>Choice 3</h2>
<p>03/25/2012 - 03/27/2012</p>
</label>
...
</fieldset>
...
</div>
This results in the following list being displayed:
(source: skitch.com)
So, on-click of one of them, I'm running this code:
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c');
$(this).next().attr('data-theme','e');
$("#settings").page();
});
The first line should, in theory, reset them all to the base-state of theme 'C', and then the second line would highlight the selected item. I can step through and see that these HTML changes are made, so it's obvious that what needs to happen next is for jQuery Mobile to re-parse and update the display.
Note the desperate attempt at refreshing the whole page with .page() at the end -- even that doesn't achieve the desired effect.
The first time you click one, it has the desired effect:
But subsequent clicks don't appear to un-highlight any previously selected rows:
I've also tried $("#showChooser").listview("refresh") and a few other similar things that I can't recall, but none have the desired effect. So what am I missing/doing wrong?
I had the exact same problem.
$('#showChooser input:radio').click(function(e) {
$("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
$(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});
See this jQuery forum post.