In my app, i have a login form like this
<div id="container">
<form name="login" id="login" method="post" action="">
<input name="email" type="text" class="label" id="email" placeholder="Enter email...">
<input name="password" type="password" class="label" id="password" placeholder="Enter password...">
<input type="submit" name="submit" id="submit" value="Login">
Sign Up
</form>
</div>
On touch devices, when I tap the screen, focus leaves the form fields (input,button,links). This happens on blackberry and android devices, haven't tried it on the iphone.
How can i prevent focus from leaving form fields? I'm building the app with phonegap.
I don't think you can prevent the user from clicking/selecting something else, but you can return the focus whenever it looses it. Simplest case:
<input onblur="this.focus()" type="text" name="text1"/>
But you can lock the user forever into that input unless you replace that with a function that evaluates if the current input still needs focus for some reason and otherwise not trigger the focus again.
If your problem is when the user does that to scroll the page, then you can try something like this:
<script type="text/javascript">
var last_selected_input;
window.onscroll = function () {
if (last_selected_input) {
last_selected_input.focus();
}
}
</script>
<input type="text" name="text1" onfocus="last_selected_input = this" />
But you need to clear the variable last_selected_focus whenever a field is complete to avoid the persistent focus on each page scroll.
could be as simple as a variable that maintains the current input selected.
$(document).ready(function () {
var selected;
$('input').focus(function (e){
selected = $(this).attr('id');
});
$('window').blur(function() {
$('#selected').focus();
});
});
Related
I have a mobile signup form that contains HTML input elements for the user's username, password, and password confirmation fields. Since this is a mobile web app and I'm trying to conserve screen space, I've elected to forego putting HTML labels above each of these elements and instead utilize placeholder attributes to signal what to enter in each field:.
<input id="id_username" placeholder="Choose a username" type="text" />
<input id="id_password1" name="password1" placeholder="Choose a password" type="password" />
<input id="id_password2" name="password2" placeholder="Confirm password" type="password" />
Initially I added a bit of JavaScript to put the focus on the username field when the user arrives at the page:
<script type="text/javascript">
document.getElementById("id_username").focus()
</script>
This worked fine except that in older versions of the default Android browser, this causes the placeholder to disappear. Since the lack of a placeholder (and label) may cause the user to not be clear on what to enter in that field, I took the JavaScript out. However, even without that JS, I'm noticing that the Android browser still puts the focus in that first form field which again deletes the label. Is there any way that I can code the page so that I'm guaranteed that no browser (including the default Android browser) will put focus on any of these fields? Techniques that wouldn't require additional libraries would be preferable as I'm trying to keep my page size and additional requests to a minimum.
Thanks.
Sometimes it is faster to write some simple functionality by your hands. Look at the example at js fiddle. If you want you can replace jquery with native javascript.
https://jsfiddle.net/ShinShil/y7o8mrwh/2/
var placeholder = 'enter something';
$(document).ready(function() {
$('.placeholder').val(placeholder);
$('.placeholder').focusin(function() {
if($(this).val() == placeholder && $(this).hasClass('opacity')) {
$(this).val('');
$(this).removeClass('opacity');
}
});
$('.placeholder').focusout(function() {
if($(this).val() == '') {
$(this).val(placeholder);
$(this).addClass('opacity');
}
});
});
If your controls are in forms, you can loop over all controls in all forms and call their blur method:
function blurAll() {
[].forEach.call(document.forms, function(form) {
[].forEach.call(form.elements, function(element) {
element.blur();
});
});
}
<body onload="blurAll()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
</body>
Note that for IE8 you'll need a polyfill for Array.prototype.forEach.
Edit
Perhaps a simpler solution is to use document.activeElement:
function blurActive() {
if (document.activeElement && document.activeElement.blur) {
document.activeElement.blur();
}
}
<body onload="blurActive()">
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<form>
<input name="one" placeholder="enter something"><input name="two" placeholder="enter something">
</form>
<p>Click on the button, then on an input to give it focus. It will be blurred in 5 seconds.</p>
<button onclick="setTimeout(blurActive,5000);">Blur active in 5 seconds</button>
</body>
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
For example, I have this form:
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price"/>
<input type="text" name="ZipCode"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping"/>
<input type="text" name="Offercode"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount"/>
<input type="submit" name="CheckOut"/>
</form>
I need that if the user press enter on Productqty1, Productqty2, or Productqty3, then the default action is suppressed, and button RecalculatePrice is clicked instead.
And the same goes with if user press enter on ZipCode, the RecalculateShipping button gets clicked instead. The same with Offercode input and RecalculateOffercode button.
But if the user press on CheckOut button, the whole form must be still submitted. That's why they're on the same form, multiple submit button on the same form.
I also need to suppress the default action of enter key, because IE8 did not sent button submit value along with the form submit, so let's disable it altogether to avoid confusion.
How can I find a unified solution for this? It's okay if it has to be made in multiple javascript function, just as long as I can understand the solution pattern, because form with multiple submit button and user can press enter on any input field is confusing me. JQuery solutions are welcomed. Thanks.
EDIT: sorry for the poor choice of words that lead to confusion. What I mean with suppress default action is that when you press enter, the form get submitted, using any (random?) button submit. That is the default behavior I want to suppress.
I have added classes and id for each submit button(added id) and text box(added class).
Try this
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1" class="class1"/>
<input type="text" name="Productqty2" class="class1"/>
<input type="text" name="Productqty3" class="class1"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price" id="class1"/>
<input type="text" name="ZipCode" class="class2"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping" id="class2"/>
<br><br>
<input type="text" name="Offercode" class="class3"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount" id="class3"/>
<input type="submit" name="CheckOut"/>
</form>
Script
$(document).ready(function () {
$(".class1").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class1').click();
}
});
$(".class2").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class2').click();
}
});
$(".class3").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class3').click();
}
});
});
Fiddle Demo
I would argue that CheckOut is your special scenario here. While you could certainly catch the enter key and invoke different actions, there are primarily two reasons why I don't find that to be the optimal solution here:
Your IE8 concern seems to negate the entire prior discussion, and in my mind, this should advise you to look in another direction. Don't do a special solution for IE8, do something that all supported browsers can understand.
There is no field for which CheckOut should be the default action on enter.
I suggest that you make different forms, and use different actions, rather than checking which button was clicked by inspecting the name parameter of the button.
On click of the CheckOut-button, which should never be triggered by an enter key, you should submit all forms. You can serialize their combined values and post them like so:
$('#product-form, #zip-form, #offer-form').serialize();
You can use jquery/javascript function to change the form.action before submitting the page.
Submit type should submit the form to default form action, which has been added on form declaration.
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="button" name="RecalculatePrice" value="Recalculate Price"/ onClick="callDefault();">
<input type="text" name="ZipCode"/>
<input type="button" name="RecalculateShipping" value="Recalculate Shipping"/ onClick="callRecalculateShipping();">
<input type="text" name="Offercode"/>
<input type="button" name="RecalculateDisc" value="Recalculate Discount"/ onClick="callRecalculateDisc();">
<input type="button" name="CheckOut"/ onClick="callCheckout();">
</form>
<javascript>
function callCheckout(){
form.action="<some value>";
form.submit();
}
...so on with other functions...
</javascript>
Change input types to button .
hide pop-up of required of input using javascript jsfiddle
try to submit with empty input and see the pop-up, so i don't need to display that pop-up and i want the required to validate.
any help i don't need to display any warning.
<form>
<input type="text" name="name" required="required" value="" />
<input type="submit" name="submit" value="Submit" />
Since this is a HTML5 Event you can prevent the event from triggering the popup and still provide validation (https://developer.mozilla.org/en-US/docs/Web/Events/invalid). A simple event listener will do the job.
To handle focus include an id to that field like so ...
HTML
<input type="text" id="name" name="name" required="required" value="" />
And handle that focus within the return function ...
JS
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("name").focus();
};
})(), true);
EDIT
Check it out
http://jsfiddle.net/rz6np/9/
autocomplete="off"
or
autocomplete="nope"
If autocomplete still works on an <input> despite having autocomplete="off", but you can change off to a random string, like nope.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form>-tag.
I'm working on a web site that runs in a single document (no real page loads after the first, its all ajax) that you must log in to view. The front page's log in form autofills exactly as you would expect.
The problem is when I load the login form in an iframe. On most browsers it autofills with the same info as the front page and works perfectly. But in the android browser it does not autofill the form at all.
I guess my question is, is there a way to make it function properly in the android browser without just autofilling it server side in the html?
Heres the form's html:
<form method="POST" id="login_form" class="disable_on_submit">
<input type="hidden" name="action" value="login" />
<div class="row first">
<label for="username">Email Address:</label>
<input type="email" name="username" id="username" placeholder="Email Address..." />
</div>
<div class="row">
<label for="password">Password:</label>
<input type="password" name="password" id="password" placeholder="Password..." />
</div>
<input type="submit" name="submit" id="submit" class="awesome" value="Login" />
</form>
So, I couldn't find a direct fix to this issue, I however did come up with a bit of a hack.
First you add a copy of your login form to your actual document, not the iframe:
this.fake_form = $('<form method="POST" id="login_form" autocomplete="on"><input type="email" name="username" id="username" /><input type="password" name="password" id="password" /></form>');
$(document.body).append(this.fake_form);
this.fake_form.hide();
Then you poll your fake form for auto filled data. Being that its hidden, you know the user didn't enter anything.
function check_fake_form()
{
var real_form = this.iframe.contents().find('body #whiteboard');
var real_u = real_form.find('#username');
var real_p = real_form.find('#password');
//if the real form has any values, we're done
if (real_u.val().trim() != '' || real_p.val().trim()) {
return;
}
var fake_u = this.fake_form.find('#username').val().trim();
var fake_p = this.fake_form.find('#password').val().trim();
//if the fake form has values, put them in the real form and quit
if (fake_u != '' || fake_p != '') {
real_u.val(fake_u);
real_p.val(fake_p);
return;
}
//check again in a short time
setTimeout(check_fake_form, 50);
}
This appears to work flawlessly in the version of android that wasn't working, and it does not interfere with browsers that work on their own.