Chrome or Android is prompting to save a "username" only (no password) for a text input. I cannot replicate it on desktop.
<input placeholder=" Search Name" id="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text">
Any ideas how to prevent this?
I wrapped the input in a form tag, and it stopped.
Related
So I have an AWS EC2 instance.
When ROUTE_1 receives a request from a mobile phone, I want the RESPONSE to the mobile phone to achieve three things in sequence.
Open the camera, wait for the user to take a photo
Ask the user to enter one input field
On submit send input data and photos to ROUTE_2 specified in RESPONSE
The Question is:
Is it possible to send 'action-requests' like this?
or
would it be easier to send them to a webpage with the above-mentioned functionality?
Yes, it's called a form element silly :P
Route_1 returns a form element for the user to fill out and submit to route_2
Example:
<form id="mf" action="https://example.com/route_1" method="POST" enctype="multipart/form-data">
<input placeholder="thing to enter" type="text" name="thing1" required />
<label id=image1_lab for="image1">Take selfie
<input type="file" style="display:none" id="image1" name="image1" accept="image/*" capture="user"
required>
</label>
<button id="submit">
<span> submit</span>
</button>
</form>
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 am designing a website. Dealing with an HTML page where a user enters decimal numbers. Let's say I will ask for their height and he has to enter it as 5.6 feet. The problem I am having is the input format on the Android keypad. My code for input format is:
<input type="number" lang="en-150" id="height1" name="total" value="" placeholder="In feet">
Now when the android keyboard appears it does not contains the dot(.) instead it just contains numbers 1,2,3,...,9,0. So user can't enter 5.6 instead 56.
I have also used:
type="number" lang="en-150"
and:
type="number" step="0.01"
and:
type="decimal"
Despite all, the keyboard is still simple. I have also checked stack flow and codes on other forums but nothing helps me out.
You can do this with:
<form action="">
<input id="height1" type="text" name="total" pattern="[0-9]+(\.([0-9]+)?)?" value="" placeholder="In feet">
<input type="submit">
</form>
However, the user can insert any character after the validation
To solve this, you will need use javascript and check before any keyDown click
In a browser, if I want to submit a form containing a username and a password input, I only need to add an "action" attribute and set the "method" attribute to "post":
<form method="post" name="form" action="https://www.xxx">
<input id="username" type="text" value="xxxxxx" name="username">
<input id="password" type="password" autocomplete="off" name="password">
<input type="submit" value="submit" >
</form>
then the browser will handle the post and concatenate the password and username as the request and send to the server.
My question is: in the webkit (what I concern is the Android webkit, but I think others will be ok)，where is the code of handling such process? Can I find the code that get the text from the input element, concatenate them, and then send to the server?
Thanks
where there's no answer, I finally find it.
For webkit, there's mainly four directory we need to consider in android:
for java part:
framework/base/core/java/androud/webkit
for native c part
external/webkit/Source/WebCore
external/webkit/Source/WebKit
external/webkit/Source/JavaScriptCore
for the form submit, the java part webkit will send a key event which will be handled by C WebCore.
we can see the code from
WebCore/html/HTMLFormElement.cpp
WebCore/loader/FormSubmission.cpp
WebCore/loader/FrameLoader.cpp
I have a .html file with an input control of type=text which is for the user to make random input that do not make up a dictionary word. It is not inside a form. It is not a password field.
<input id="myblah" type="text" placeholder="hello" name="s" size="20"
maxlength="36" autocorrect="off" autocapitalize="off" autocomplete="off"
spellcheck="false"/>
On an Android phone, when I browse to the .html file and type in text into this input control the keyboard software makes suggestions and sometimes "corrects" the input to a word. This is behaviour that I would like to switch off - from what I've read, the above attributes should switch it off, so I'm at a bit of a loss.
(Latest version of android on a Samsung Galaxy S3, using the dolphin browser and swiftkey-x keyboard)
There is no such thing as autocapitalize(from what I know of html), but you might be able to try this. <input id="myblah" type="text" placeholder="hello" name="s" size="20"
maxlength="36" spellcheck="false" autocomplete="off" />
I am not too sure whether or not this will work on android for I do not have an Android Smartphone but this works on my browser.
For input controls:
<input type="text" name="username" id="username"
class="form-control" placeholder="Enter your user name"
value=""
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off" />
For a textarea control:
<textarea type="text" name="control_codes" id="control_codes"
class="form-control" placeholder="Enter device control codes"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
autocorrect="off">
</textarea>