I am developing a mobile application with jquery mobile, php ,phonegap and cordova
I have a requirement that in the virtual keyboard of all form elements like Text boxes should have next and previous buttons and for the last text box the Done/Go/Enter option should be shown.
How can I handle those buttons programatically without adding plugins.
Here is my form
<form id="loginForm" name="form1">
<div class="row mainpart paddingleftandright clsfieldPadding">
<div class="col-lg-12">
<div class="input-group1" id="email_div">
<input type="email" id="login_form_email"
placeholder="EMAIL ADDRESS" value="" data-clear-btn="true"
data-mini="true" tabindex='1' class="clsPyType clsBodyTxt" autocapitalize="off" onBlur="getPasswordProtectionStatus(this.value);checkLoginEmail(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id1">!</span></span>
</div>
</div>
</div>
<div id="login_form_email_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright clsfieldPadding2">
<div class="col-lg-12">
<div class="input-group1" id="password_div">
<input type="password" id="login_form_password"
placeholder="PASSWORD" value="" data-clear-btn="true"
autocomplete="off" data-mini="true" tabindex='2' class="clsPyType clsBodyTxt" onBlur="checkLoginPassword(this.value);">
<span class="input-group-addon"><span class="glyphicon" style='display:none;' id="glyphicon_id2">!</span></span>
</div>
</div>
</div>
<div id="login_form_password_msg" class="clsPyType"></div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12 remember-me">
<select name="slider" data-role="slider" id="rememberMe">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div class="col-sm-5 clsPyTypeUprBold Clsremember">Remember Login</div>
</div>
</div>
<div class="row mainpart paddingleftandright">
<div class="col-lg-12">
<!-- <a data-role="button" data-transition="flip"
data-direction="reverse" class="clsBtnHead2 clsBtnRed" id="login_form_submit" onClick="login_form_submit();"><div class="clsBtnTop">LOGIN</div></a> -->
<input type="submit" tabindex='3' id="login_form_submit" class="clsBtnHead2 clsBtnRed" onfocus=" $(this).trigger('click');" value="LOGIN"/>
</div>
</div>
If any one have better ideas please share
All of the fields within a form will have the prev / next buttons which act like tabs do on a real keyboard. The done/Go/enter buttons... well they will naturally occur if there is data to submit. I think this just boils down to semantics and building your form correctly.
In the screen shot, the first field is focused, the next button is available (chevron pointing to the right) and the form is able to be submitted via the GO button. It can be submitted as for all the device knows this form is complete, your validation will decide whether or not the data is complete. What I am getting at here is that you won't be able to hide the return/Go button at will. However you can omit it using a numerical keypad.
The 'done' message occurs above the virtual keyboard and does not submit (unless you submit on blur, as using it blurs whatever field you were focusing on), and looks like a text link.
The 'Enter' & 'Go' buttons will submit the form. So if the last field in your form is numerical (big finger buttons) then you won;t be able to use it for submission unless you submit the form on blur of that field.
Here is a working example: http://codepen.io/morganfeeney/pen/ojdRMQ
I built that to test virtual keyboards on handheld devices. Go and check it out on your iPhone ;)
FYI: the example code you supplied does not have a closing </form> tag.
Related
I have an Angular 14 app where I display some content. There is a button to put this into "edit mode" wherein I hide the content and show a form. When the user edits the form and clicks "done", the form is hidden and the updated content shows.
This works fine, but I am trying to make this accessible. I added an aria-live to the part with the form and when it is shown the entire form is read out loud using VoiceOver on Mac, but you don't know it's a form. You can tab to the fields and edit the form, though, and then click Done and the form goes away.
However, how do I let unsighted users know that (1) a form has appeared and then (2) the form have disappeared and the regular content has re-appeared?
I have made a stripped down Stackblitz to illustrate.
It's basically this HTML:
<div class="container">
<div class="row">
<div class="col">
<div *ngIf="!showForm" aria-live="polite">
<h1>
Hello {{ myForm.controls.fname.value }}
{{ myForm.controls.lname.value }}
</h1>
<button class="btn btn-secondary" type="button" (click)="onEditForm()">
Edit Greeting
</button>
</div>
<form [formGroup]="myForm" *ngIf="showForm" aria-live="polite">
<h3 class="sr-only">Edit Greeting Form</h3>
<div class="form-group mb-4">
<label for="fname">First Name</label>
<input
type="text"
id="fname"
formControlName="fname"
class="form-control"
/>
</div>
<div class="form-group mb-4">
<label for="lname">Last Name</label>
<input
type="text"
id="lname"
formControlName="lname"
class="form-control"
/>
</div>
<button type="button" class="btn btn-primary" (click)="onDoneForm()">
DONE
</button>
</form>
</div>
</div>
</div>
ARIA live regions aren't well suited for elements containing a lot of text or other things. The screen reader will read them all at once, and, for long things, it's rarely the best thing to do because the user can't interrupt or pause the read, or if he/she does it, the rest is kind of lost.
A much better thing to do for forms is to put the focus on the first input field. The first label will be read as well as the field type, and so the user will know that he/she has to enter some information, and then will press tab to go to the next field, and so on.
Additionally to that, you can use ARIA live, but not on the form or content shown itself. The best use of ARIA live is for displaying short strings saying "The form is shown", "Content is loading", "Your request has been submitted", "There are 12 search results", etc.
This is driving me up the wall - any help much needed and appreciated.
I have a partial view _Policies.cshtml with a button that has an onclick tag that calls the JavaScript function changeCostCentreNumber():
<div class="row">
#if (User.Claims.Any(x => x.Value.Equals(Site.Infrastructure.Common.MemberType.IsScheme.ToString())))
{
<div class="form-group">
<div class="col-md-4">
<label for="costCentreChange" class="form-label">Change scheme cost centre number</label>
<input id="costCentreChange" class="search-icon form-control" type="text" name="searchFilter" placeholder="" value="" pattern="[a-zA-Z0-9 ]+" maxlength="20"/>
</div>
<div class="col-sm-12">
<input class="btn button button-green" type="submit" id="costCentreNumberSubmitBtn" value="Submit" onclick="changeCostCentreNumber()"/>
</div>
<div class="alert-info alert" id="costCentreNumberChangeAlert" style="display:none">
The cost centre number has been updated successfully.
</div>
</div>
}
</div>
The problem is when I build and inspect the element in Chrome (or Firefox, this seems to be a framework issue) the onclick tag is just not there. If I add the tag in Dev Tools it calls the correct function and does what it's supposed to. I just don't understand why the tag is being stripped out at build time.
I've tried to move the onclick to other elements and divs, inside and outside the condition in the partial and the same behaviour repeats. There's something about this I am simply not grasping.
I'm trying to disable a materializecss button if the value of a particular input in a form is blank, but I can only successfully disable it using ng-disable if the form is $pristine, not on the input.
This works:
data-ng-disabled="mainDetailsForm.$pristine"
but this doesn't:
data-ng-disabled="mainDetailsForm.niNumberInput.$pristine"
and this doesn't:
data-ng-disabled="niNumberInput.$pristine"
-
JSFiddle: https://jsfiddle.net/6qswosh8/.
-
Full HTML:
<form id="mainDetailsForm" name="mainDetailsForm">
<div class="row">
<div input-field class="input-field col-xs-12 col-md-4">
<input id="niNumberInput" name="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
<label for="niNumberInput" data-error="National Insurance number must be 9 characters long">National Insurance Number</label>
</div>
<div input-field class="input-field col-xs-12 col-md-1">
<button data-ng-disabled="mainDetailsForm.niNumberInput.$pristine" class="btn button waves-effect"><span class="fa fa-search"></span>Verify</button>
</div>
</div>
</form>
To access the properties of individual inputs through the form you need to give the input an ng-model. The ng-model property is what binds it. I updated your jsfiddle https://jsfiddle.net/dougefresh/6qswosh8/1/ ( I also had to get angular working properly in the fiddle).
<input id="niNumberInput" name="niNumberInput" ng-model="niNumberInput" type="text" class="validate" pattern=".{9}" placeholder="National Insurance Number">
This small line in the docs is important "To allow styling of form as well as controls, ngModel adds these CSS classes:" It lists $dirty, $pristine, etc.. The docs specifically say they are bound to ng-model.
https://docs.angularjs.org/guide/forms
I'm trying to realize a fixed floating panel over my site that loads an iframe with a login form. It seems to work fine with every mobile browser except for firefox mobile (firefox desktop works fine) that prevents every kind of input.
When I try to write something (with stock keyboard on android 6.0.1) in a form inside an iframe it seems to buffer the text but nothing appear on input element. Moreover when I click on any input field outside my iframe, the whole text written before get attached in this field.
<img id="logo" src="icons/logo-little-BLACKBACK.png">
<div id="logingeneric" tabindex="-1" role="dialog" aria-hidden="true">
<div class="generic-dialog">
<div class="generic-content">
<div class="generic-header">
<h4 class="text-center">Login</h4>
</div>
<div class="generic-body">
<form class="form center-block" action="Home.php" method="post">
<div class="form-group">
<input id="email-field" name="username" class="form-control input-lg input-field" placeholder="Email" type="text">
</div>
<div class="form-group">
<input id="password-field" name="password" class="form-control input-lg input-field" placeholder="Password" type="password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Accedi</button>
</div>
</form>
</div>
<div class="generic-footer">
<span class="pull-right" id="registrati">
Registrati
</span>
<span class="pull-left">
Password dimenticata?
</span>
</div>
</div>
</div>
</div>
This is the body of the page loaded inside my iframe. How can I avoid this strange behaviour of Firefox mobile?
Thank you!
Eventually I got a solution. In our case we override the onResize event that is triggered on every input focus in order to correctly scale the floating panel. This led to a focus lost on every "zoom on focus" on firefox (a bug maybe?).
The solution is to avoid panel scaling if an input element is focused.
I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.