Essentially, I don't have complex code but when using input fields in my Ionic 1 app there is an error that screws up the text in the field after I use anything that isn't alphanumeric. So typing in the email address 'o#o.com' (each letter chronologicaly) in a field displays like this:
o
o#
oo#
oo#.
oo#..
oo#..o
oo#..om
This is happening on an android device. I don't know whether or not it works on an ios device. It doesn't happen in an emulator or in ionic serve --lab. I've tested the ionic templates and it breaks with those projects too. So I don't think it matters what my specific code looks like but here it is:
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" ng-model="loginData.email">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="text" ng-model="loginData.password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
I've recently started working in Ionic 2 in the last couple months, and don't know if that has had negative effects on Ionic 1 apps (I know they say it doesn't but this wasn't a problem in the past). What do you all think of this?
The problem sat for a while until I was forced to update my JDK and do some updates in Android SDK Manager. Then it seemed to work fine.
Related
Example:
<form novalidate>
<div class="field">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</div>
<div class="field">
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone">
</div>
<div class="field">
<label for="email">Email Address:</label>
<input type="email" name="email" id="email">
</div>
<button type="submit">
Submit
</button>
</form>
https://jsfiddle.net/cuvqkp14/
(visit on a tablet, Chrome desktop is not the issue)
When I have two or more inputs one of whose type is tel or whose inputmode is numeric, clicking the Next button on the Android keypad to navigate to the next field results in the numeric layout of the keyboard even if the next field is type=text, type=email, or inputmode = text. I have to click the ABC button to the left of the spacebar and then I am allowed to input alpha characters.
We have tested this across multiple Android tablets all running Android 8.0 and Chrome 70+
How can I force the keyboard layout back to alpha mode?
I had similar issue on iPhone. And I have solved this problem on iPhone with adding from pattern attributes to HTML element.
Try something like the following code with pattern attributes:
<form novalidate>
<p class="field">
<label>Number: <input type="tel" name="number"></label>
</p><p class="field">
<label>Name: <input type="text" name="name"></label>
</p><p class="field">
<label>Phone Number: <input type="tel" name="phone"></label>
</p><p class="field">
<label>Street: <input type="text" name="street" inputmode="text" pattern=".*"></label>
</p><p class="field">
<label>Email Address: <input type="email" name="email" inputmode="email" pattern="[A-Z0-9a-z\.\-#]"></label>
</p>
<button type="submit">Submit</button>
</form>
Unfortunately my Android system is a little bit old and I can not reproduce your issue – I have tried it with Chrome and Opera browsers. And I hope your issue will be solved with my code.
You can additionally try to use inputmode="text" and inputmode="email" atributes for this inputs. This is supported in Android Chrome and maybe it will work.
My recommendation
You can write your code also much shorter without for="name" (for label elements) and id="name" (for input elements) attribute:
<label>Name: <input type="text" name="name"></label>
In this case it is the same like with this attributes.
tested on Android 9.0 with GBoard and Chrome 72.0.3626.76, but were unable to reproduce the issue. however, attribute inputmode would be supported since Chrome for Android v 67 and this is the only alternative I could think of - except forcibly switching with JS on events focus & blur:
<input id="phone" name="phone" type="text" inputmode="numeric" pattern="[0-9]*"/>
trying to reproduce the issue with the Android emulator might help to narrow it down to the cause... and I think so, because some devices come with a vendor-specific keyboard, which might react improperly to events emitted by Chrome. just recently I've noticed a slight difference in behavior, in between the input of GBoard and SwiftKey, when I was bounty hunting.
tying to "request desktop site" might also be worth an attempt.
document.addEventListener('focus', function(event) {
if (["INPUT", "TEXTAREA"].indexOf(event.target.tagName) != -1 && event.target.getAttribute('data-focused') != 'true') {
event.target.blur();
event.target.setAttribute('data-focused', 'true');
setTimeout(function() {
event.target.focus();
}, 0);
}
}, true);
document.addEventListener('blur', function(event) {
if (["INPUT", "TEXTAREA"].indexOf(event.target.tagName) != -1 && event.target.getAttribute('data-focused') == 'true') {
event.target.removeAttribute('data-focused');
}
}, true);
https://jsfiddle.net/g34d0nsk/
I experienced this same issue while using the TouchPal Keyboard. Switching to a different keyboard (GBoard) resolved it, although it's confusing to me why. This seems like the responsibility of the browser to tell the keyboard which mode to be in.
I have a website working perfectly on desktop, however, google chrome is not showing validation error messages or flash info.
I tried other navigators like html source code viewer: worked perfectly
on chrome for desktop, everything is ok
when I serve my project from my computer and access it throgh wifi, it works perfectly
My server is running nginx on linux debian
The problem is, this only happens on my signin/signup page, other pages are showing errors and flash messages perfectly even on chrome for android
here is my view:
<h3>Welcome back</h3>
<div class="row">
<div class="col-lg-6">
<form class="form-vertical" role="form" method="post" action="{{ route('auth.signin') }}">
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="control-label" id="email">Email</label>
<input type="text" name="email" class="form-control" id="email">
#if ($errors->has('email'))
<span class="help-block">{{ $errors->first('email') }}</span>
#endif
</div>
<div class="form-group{{ $errors->has('password') ? ' has- error' : '' }}">
<label for="password" class="control- label">Password</label>
<input type="password" name="password" class="form- control" id="password">
#if ($errors->has('password'))
<span class="help-block">{{ $errors- >first('password') }}</span>
#endif
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Sign in</button>
<a style="padding-left: 10px;" href="{{ route('auth.forgot') }}">Frogot your password?</a>
</div>
<input type="hidden" name="_token" value="{{ Session::token() }}">
</form>
</div>
</div>
<script>
(please don't mind the spaces in the code, I don't have these in my page)
inside my controller, I have this:
$this->validate($request, [
'email' => 'required',
'password' => 'required',
]);
and I show flash messages this way:
return redirect()->back()->with('info', 'Incorrect sign in information.');
can you please help me out? this is really weird and frustrating
thank you
Haser!
I have the same problem on the test server, but the production is ok.
Having studied all the circumstances, I am inclined to believe that in my case the problem lies in the absence of https on the test server.
My logic is this: mobile chrome sees the password entry field and sees that there is no certificate. These two circumstances come to non-standard behavior. Indirectly, I managed to confirm my theory by studying the password change page, there is the same situation with the absence of errors.
This behavior is observed only in mobile chrome on android!
On Clicking Select Box on Ionic SELECT, it returns nothing on the interface although the option values exist.
I read around and I found out it was a bug on IONIC when IONIC automatically removes the 300ms delay in order to make Ionic apps feel more “native” like.
This only happens on Android OS .
There is another question posted about this.
How can I get Ionic select box working on Android again?
It is shown that upon clicked, there is no response to show the option list.
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<div class="input-label ng-binding"> TESXX</div>
<span class="help-block"></span>
</label>
<label class="item item-input">
<span class="input-label">Balance</span>
<div class="input-label ng-binding"> 1,200,100 </div>
<span class="help-block"></span>
</label>
<label class="item item-input">
<span class="input-label">Direction</span>
<select ng-model="formData6.dir" name="dir" class="ng-pristine ng-valid ng-touched">
<option ng-selected="1" value="0" selected="selected">From</option>
<option value="1">To</option>
</select>
</label>
</div>
Anyone still using Ionic 1, the solution to this is to allow browser's default behavior on taping a select (in Ionic 1.2.4 this was found at line 3060).
Well, I made an app using Ionic Creator, I added two images and finished my app, Iexported it out from ionic with "ionic start [appName] creator:[myappnumber]" and it did all fine.
I used ionic serve in terminal and it pops up a chrome window showing my app, in there the image is showing, but when I did ionic upload and downloaded files in my mobile with ionic view and then wanted to preview my app, the problem is there, the image isn't showing, I already tried with img src= and img ng-src but neither of them works.
<ion-view title="Title">
<ion-content padding="true" scroll="false" class="has-header">
<img ng-src="/img/r7qprdTRXqs2xOvgKLHI_3-logocolor.png" width="100%" height="auto" style="width: 100%; height: auto;">
<form class="list">
<ion-list>
<label class="item item-input">
<span class="input-label">Nombre</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Usuario</span>
<input type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email" placeholder="">
</label>
</ion-list>
Iniciar Encuesta
</form>
</ion-content>
Try to debug with using Chrome browser's DevTools. Type "chrome://inspect/#devices" in the url section after running the application on your device. Make sure your device is connected to your computer. Once the app runs, you will be able to see your device on the browser and check if images are loaded. It will be easy to debug. It will be either path issue or layout issue.
is there any known issue of bootstrap 3.0 (the latest one) on android phonegap. I am able to see the buttons nicely on firefox (and on same resolution as on phone) but when the binary is installed on the phone the buttons do not render....
is this a known issue ?
Following is my simple template:
<div id="mcontent">
<div id="swrapper">
<div id="islider">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">Mrs</a>
<a class="btn btn-default" href="#">Ms.</a>
<a class="btn btn-default" href="#">Mr.</a>
</div>
<form>
<input type="text" name="firstname" placeholder="Firstname">
<input type="text" name="lastname" placeholder="Last Name">
<p><input type="text" name="email" placeholder="Email"></p>
<p>Must be at least 8 characters long</p>
<input type="password" placeholder="Password">
<input type="password" placeholder="Password repeat">
<p><button type="submit" class="btn btn-primary btn-large btn- block">Submit</button></p>
<p><span id="dclaimer">By registering you confirm that you accept our Terms of Use and Privacy Policy</span></p>
</form>
</div>
</div>
</div>
I know this is an old post but I have had the same issue. I believe this is down to jquery mobile. As when i removed it, it worked
Removing just the css of jquery mobile seems to keep jquery mobile functionality and allow bs to work