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.
Related
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.
Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.
I have made a simple form , you can check it on http://bspldev.review/phpmailer/ , using bootsrap its working fine on desktop but on mobile input field for name and email is not editable, that we can not write anything , only mobile field is working in mobile view, here is simple form code, i have give proper links for bootstrap and jquery library in header, here i will give excerpt of form only,
<form method="POST" name='' id="woohooEmail" action="">
<div class="form-group">
<label class="sr-only" for="fullname">Name</label>
<input type="text" class="form-control" placeholder="name" name="LastName">
</div>
<div class="form-group">
<label class="sr-only" for="mobile">Mobile</label>
<div class="input-group">
<div class="input-group-addon">
+91
</div>
<input type="text" class="form-control" placeholder="mobile" name="Mobile">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="area">Email</label>
<input type="email" class="form-control" placeholder="email" name="Email">
</div>
<div class="pad">
<button type="submit" name="submit" id="submit" value="" class="btn btn-default btn-text ">
Schedule
</button>
<i class="fa fa-circle-o-notch fa-spin" id="icon-load" style="font-size:24px; color:red; display:none"></i>
</div>
<form>
Please check this on mobile and kindly suggest me some solutions
In your mobile image is coming above the form, So increase your z-index of form's parent div or decrease z-index of your image in mobile screen using media query. You haven't add the div in above code so i just add z-index on form.Like :-
#media screen and (max-width: 768px) {
#woohooEmail{
z-index:9999;
}
or here you just can simply add z-index without media query too. it will work for every device
Build the form using boostrap's grid system. you can use one row spanning all the 12 columns and use the col-sm attribute
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.
I integrated nicEdit because it's very light unlike all the other ones that contain hundreds of kb's.
In Chrome it is however causing problems. It for example doesn't save the text into the textarea or make things bold. The problem can be observed at this website or see below code. Please don't provide a hack like one answerer did because that's not going to help anything.
I have disabled the editor for debugging purposes. You can enable it with your console through new nicEditor().panelInstance('comment');
<div class="rdd blog-item">
<h1><a id="blog-item-title" href="/b/asdfssadfadf">this ia test</a></h1>
<div class="blog-date">
Date posted: 2013-03-01
</div>
<div class="blog-message">
<p>
asdfasdfas
</p>
</div>
<div class="blog-keywords">
Keywords: dfsa sadfasd adfasf adfas
- jlk
</div>
<h4>0 Comments</h4>
<div class="blog-comment blog-new-comment">
<form id="new_comment" name="new_comment">
<div class="blog-comment-row">
<h4></h4>
<h4>Would you like to place a comment?</h4>
</div>
<div class="blog-comment-row">
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</div>
<div class="blog-comment-row">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" title="Enter your name">
</div>
<div class="blog-comment-row">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" title="Enter your email">
</div>
<div class="blog-comment-row">
<div class="blog-comment-cell">
</div>
<div class="blog-comment-cell">
<a class="blog-comment-submit blog-comment-button" href="">Submit</a><br/>
Your ip address is 220.245.93.218
</div>
</div>
</form>
</div>
</div>
The Bold problem is caused by CSS inheritance. In your css file remove rdd blog-item span{} and it will work. nicEdit does not save the contents automatically in the textarea. At form submission you therefore have to run: nicEditors.findEditor('comment').saveContent(); to save it
You can bind events on the editor and save it's contents when that event is fired.
When I run this code on your example page, it works for me (your server doesn't pickup the nicEditor HTML tags though):
var commentNicEditor = new nicEditor().panelInstance('comment');
commentNicEditor.addEvent("blur", function () {
commentNicEditor.instanceById('comment').saveContent();
});
Updated with jQuery-free solution based on official documentation.