as the title in my question.
I have this simple script
<input type="date" aria-label="Check Out" class="form-control contact-form hidden-sm hidden-xs" id="b-checkout" placeholder="<?php date('d-m-Y') ?>" />
In Dekstop version is working well, and than I use mobile view in inspect element also working well.
But when I test with android browser, the placeholder dont show for the first time, but after I chose the date, the place holder will appear.
what I have done is I add this css script
input[type="date"]::before {
content: attr(placeholder);
width:100%;
}
But after I test in android browser, the placeholder will be 2 content after I select diferent date, see the image.
and than I make some changes in input date
<input onfocus="this.placeholder = ''" type="date" type="date" aria-label="Check In" class="form-control date-mobile hidden-lg hidden-md" id="b-checkin2" placeholder="<?php date('d-m-Y') ?>" />
In android browser it working well, but in mobile view in inspect element, the place holder dont show after I select the date, see the image
and make some changes again
<input onfocus="this.placeholder = ''" onchange="this.placeholder= this.value" type="date" type="date" aria-label="Check In" class="form-control date-mobile hidden-lg hidden-md" id="b-checkin2" placeholder="<?php date('d-m-Y') ?>" />
but after I test in android browser is error, see the image
i think tht's because you specify that you won't display this element if the size of the screen is small or medium ...
...hidden-lg hidden-md....
If you remove it it should display well.
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'm just making a site for study proposes...
When I'm on desktop, the input type="date" shows up a default value with the letters dd/mm/aaaa...
on desktop
But when I'm on my mobile (Android), the input type="date" shows an empty field...
on mobile Android
The code is (I'm using Bootstrap 3):
...
<div>
<input type="date" class="form-control" id="data" name="data" style="width:65%;" required>
</div>
...
I tried placeholder="dd/mm/aaaa" too... But without success...
Why is this happening?
Could someone help me please?
Thanks in advance!
Android WebKit 4 is such a mess that it needs its own, private compatibility table for some types.
Although the implementations of <input type="date" > are different across the various mobile OS platforms, support is quite widespread, with the exception of the stock Android browser.
For this browser and for low-end devices a simple text field will be displayed. This is not very user-friendly for date input.
As you are using bootstrap I reccomend going through : this
EDIT :
I found an interesting way of solving this issue :
A tool called Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer. Using that you can try the following which shows how you can use the native datepicker when available, and fallback to jQuery UI’s picker in unsupported browsers(in this case : Chrome -> Android Webkit).
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
Your complete code will look like this :
HTML:
<input type="date">
<br><br>
<input type="text" id="myDate" />
JAVASCRIPT:
$(function() {
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker();
}
});
<input type="text" class="form-control" typeahead-on-select="setDeliveryArea($item)" ng-model="scope.da" placeholder="Set Delivery Location" onfocus="this.placeholder=''" onblur="this.placeholder='Set Delivery Location'" typeahead="a as a.AreaName for a in scope.deliveryAreas | filter:$viewValue | limitTo:8" ng-blur="getDelivery()" typeahead-editable="false" typeahead-append-to-body="false" autocomplete="off" />
Above is the code that I am using to set a textbox to display the list of Autocomplete from the database.
While it is working perfectly fine on all browsers on desktop. Its even working on Mobile View on chrome. However, when the same link/page is opened and control is accessed in an Android WebView, it is not working.
Any suggestions to resolve this ?
PS - autocomplete="off" is something which was not earlier but I had put it based on some google searches I did. So irrespective of this tag, its not working.
Similar funcionality on a different page is working fine. The code for that textbox is as below. This perfectly shows the list even in Android WebView.
<input type="text" class="form-control" ng-model="area" placeholder="Delivery Area" onfocus="this.placeholder=''" onblur="this.placeholder='Delivery Area'" typeahead="a as a.AreaName for a in areas | filter:$viewValue | limitTo:8" typeahead-on-select="setDeliveryArea($item)" typeahead-editable="false" typeahead-append-to-body="false" ng-blur="area=(area||'')" typeahead-on-select="model=$item.AreaId">
I have this weird issue with JQM 1.3, JQ 1.9.1, Android 2-4, and mainly Motorola devices, but can replicat on some HTC.
First let me preface that this code seems to work in most mobile browsers.
The code is in a standard JQM content div, in a page:
<div style="width:80%; max-width:800px; text-align:center;">
<!-- First Name -->
<label for="txty" class="ui-hidden-accessible">First Name</label>
<asp:TextBox ID="txty" runat="server" datafield="FirstName" collectInfo="true" CssClass="" Columns="50" placeholder="First Name"></asp:TextBox>
<!-- Last Name -->
<label for="txtx" class="ui-hidden-accessible">Last Name</label>
<asp:TextBox ID="txtx" runat="server" datafield="LastName" collectInfo="true" CssClass="" Columns="50" placeholder="Last Name"></asp:TextBox>
..// more fields
<!-- BUTTONS -->
<button data-role="button" id="btnSubmit" name="btnSubmit" data-icon="alert" class="btn"><span>Submit</span></button>
<button data-role="button" id="clear" name="clear" class="clear btn" data-icon="alert"><span>Clear</span></button>
</div>
The results (I am zoomed in so you can see the form):
The issue:
** NOTE The page does not display the below error UNLESS a user scrolls and then tries to input text into a texbox **
After a user scrolls and taps on an input, the input displays in two spots...
Thanks!
Well after searching for days about this, I posted here and found my answer shortly thereafter.
This is a known issue in the internal Android Browser in Jellybean.
Src:
https://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=30964
There is a workaround with some trade-offs. Such as losing the ability to scroll in text areas, but if you have this issue, then this is a good workaround.
The workaround is to add this to your main CSS file:
/*
Prevents a bug in Android 4.0-4.1 that duplicates text inputs onFocus ANDROID BUG# 30964
Link to Bug Tracker: http://j.mp/YhydH6
Remove when no longer needed...
*/
input {
-webkit-user-modify: read-write-plaintext-only;
}
We are developing a mobile web app in jQuery Mobile 1.0.1 and Phonegap 1.4.1 and have run into issues with the keyboard on the galaxy s2.
We have a menu which slides out and contains a search input:
<input type="search" placeholder="Search..." name="search" id="menu_search" data-role="none" />
When we tap in the input so that it gains focus, the keyboard opens but does not allow us to type anything in. I guess a clue here is that its giving us a regular text keyboard and not the search keyboard (which has a magnifying glass as the enter key)
If we focus the input when the menu opens: $("#menu_search").focus() - The search keyboard is open when the menu displays and we are able to search BUT as soon as we tap in the input the keyboard changes to a regular keyboard and we a not able to type anything.
Another clue is that while typing in the keyboard the auto-predict works but when tapping on the correct option only a space is added to the input and none of the other characters.
We have tried a bunch of other attribues on the search input to no avail:
<input type="search" placeholder="Search..." name="search" id="menu_search" value="" data-role="none" autocomplete="off" autocorrect="off" autocapitalization="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="-webkit-appearance:searchfield;" class="ui-autocomplete-input" />
This all works fine on a HTC Desire running 2.2 and a desire running CM7 (Android 2.3.7)
We even tried changing the input to a textarea but this did pretty much the same thing :(
I also tried:
$("#menu_search").live('focus',function(event){
event.preventDefault();
});
to see if that would prevent it from changing keyboards but no luck either.
We do however have another search input elsewhere in the app which works fine, the only difference being that the other search is in a "propper" page: data-role="page" and the menu is outside of all of the other pages and in its own just set to hidden initially.
Please help, im crying blood atm!
You probably have
-webkit-user-select: none;
In your CSS somewhere. If you enable text selection for inputs
input, textarea { -webkit-user-select: text; }
it works again!
Did you try adding data-native-menu="false" attribute to your search input tag.
If you're still stuck on this, try updating to phonegap 2.0. It fixes some input problems.
$('#pageid').live('pageshow', function(event, ui) {
$(this).delegate('input[data-type="search"]', 'keyup', function () {
if($(this).val().length != 0)
keyword = $(this).val();
});
});
i'v create an app using phonegap + jequery you look for it in playStore "AssignmentReminder" or type in the search field koshWTF.
anyway. i'd encouraged this issue before and haven't fixed it as i guess its 4.0.1 issue not the phone gap nor jquery mobile , because i still can type under 4.0.4 and lesser. hope you find the answer for it because i did search aloot last time and couldn't find it.
I have/had the same issue on my Note II running 4.1.1 rooted using Phonegap 2.6.0 (though I can also replicate it in 2.5.0), jQuery Mobile 1.2.0, and jQuery 1.7.2. My keyboard is SwiftKey 4.0.1.128.
Except rather than just one input causing me issues, my form has multiple inputs that eventually cause me trouble. It's a real headache because it's hard to replicate - the input always works at first, but if you switch between inputs randomly and long enough, it eventually stops working at a random time.
This error used to happen fairly quickly, so that it would make it a pretty significant issue considering I would have to restart the app to get the form working again, which would eventually stop working yet again. My new form structure seems to work well; the error occurs after literally minutes of typing long strings and randomly switching inputs, which I assume no user will be doing; but it still upsets me that the error is there.
I tried to get help on this error on the jQuery Mobile forum, but they gave me some snarky comment about how it's likely just my element ID usage, because apparently 99% (probably not even realistic) of JQM errors are from incorrect ID usage. I know for a fact my IDs are all unique across every page, but they insist it's an ID error without even trying to correctly diagnose the issue, but I digress.
I should also note that I found the CSS solution that was provided in another answer in many other similar issues across the web, but not this exact issue; while I understand its usage, the CSS did not fix the issue for me.
My form is dynamically loaded into a data-role="content" DIV inside of a data-role="page" DIV, so:
<div data-role="page">
<div data-role="content" id="my-form-holder">
</div>
</div>
I've found the best form structure, at least in my application, to cause the error least frequently is:
<form id="account-add" action="add-edit-account.php" method="post" data-ajax="false" autocomplete="off">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="custom-name">
</label>
<input name="custom-name" placeholder="Account Name" value="Service Name Here" type="text"><br>
<label for="custom-1">
</label>
<input name="custom-1" placeholder="User ID" type="text"><br>
<label for="custom-2">
</label>
<input name="custom-2" placeholder="Password" type="password"><br>
<input type="hidden" name="action" value="add-2">
<input type="hidden" name="newserviceid" value="3">
<input type="hidden" name="userid" value="1">
<input id="account-add-submit" type="submit" name="account-add-submit" value="Add Account">
</div>
</form>
The form HTML is fetched via AJAX and loaded into the DIV by:
$(ajaxData).appendTo("#my-form-holder").trigger("create");
Naturally, your form will be a bit different, and you may not even have a form since you just have a search input (getting to that in a moment). But if you do have a form, that's what works best for me.
Since you're in Phonegap, you may not even need an action theoretically since you likely have jQuery to handle the input, but jQuery Mobile docs state forms must have action and method attributes, so I didn't want to go against that. Also, jQuery Mobile usually has a data-role="field-contain" DIV around each label/input group, but I found that the error occurred sooner if I did this. Again, the error occurs at an arbitrary moment that is never the same, so I don't know if it's directly related to the DIV.
I also have an input hard-coded into another page:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="service-search-input">
</label>
<input name="service-search-input" id="service-search-input" placeholder="Enter a service to search for" type="search">
</div>
This seems to work fine. However, there are no other inputs to switch to, so the best I can do to try to replicate the error is focus/unfocus the input by tapping elsewhere on the page. Though, I am always able to type initially whereas your error doesn't let you type at all if I understand correctly. You may want to try that HTML structure and see if it works. There is no form tag surrounding that input.
Our issues are a little different (I have most of my issues with a dynamically injected form whereas yours is hard-coded from what I gather), but this is the only page I could find anywhere that directly addresses this exact issue, so hopefully this helps and we can get some further insight on this issue.