When you copy then paste the string “word”, macOS sometimes inserts “word” (unchanged), “ word”, “word ”, or “ word ”, depending on what you’re pasting it next to, whether it thinks you copied it as a word or as a range, and whether you’re pasting into a writing input (like a note in the Notes app) or a string input (like Safari’s URL bar). Click-and-dragging to select results in a range copy, double clicking results in a word copy.
On macOS, Safari and Chrome perform automatic space insertion in all inputs, while Firefox performs it in none. Firefox also does not follow the native behavior for double clicking a word, right clicking a word, or copying a word.
You can play with the behavior with the following demo. Try double clicking a word then pasting it multiple times, then try selecting a word by dragging then pasting it multiple times.
<div>one two three</div>
<input>
Automatic space insertion is probably fine and intuitive for macOS users, but is sometimes inappropriate for the same reason it’s inappropriate in Safari’s URL bar: some contexts are not in English or any other written language. In these contexts, automatic space insertion leads to surprising results. For example, I ran into this issue when entering input in a micro-language of the form [field.{id}], then pasting an ID, which was copied as a word, then getting [field. {id}] and the error that it caused.
Ideally, I want to instruct the browser not treat an input’s value as writing. Minimally, I want to turn off automatic space insertion an inputs. How can I do this?
Things I’ve tried that didn’t work:
Setting lang="" or lang="none" on both the input and the copied text
Setting lang="zh" on both the input and the copied text (Chinese languages do not use spaces between words)
Setting spellcheck="false" on the input
Setting autocorrect="off" on the input (non-standard, Safari only)
One solution is to cancel then mimic the paste event in JS.
<input id="example">
document.querySelector('#example').addEventListener('paste', e => {
e.preventDefault();
const pastedText = e.clipboardData.getData('text/plain');
document.execCommand('insertText', false, pastedText);
});
This solution has the following limitations:
Requires JS
Does not also disable other writing-specific niceties, if any exist
Uses the deprecated document.execCommand API
On a password input, it doesn't allow emoji characters. And on iOS you can't even choose to use a different keyboard when focused on a password input field. I'd like my normal text input to do the same.
I was thinking you could specify 'accepts-charset' on the input but you can not.
This is to prevent users from inputting emoji chars into a text field.
I know there are JS solutions for this but I was hoping there would be an attribute or something I could use to control it instead.
Also I tried setting the 'accepts-charset' on the form tag to "UTF-8" and a few other. It made no difference. :/
I'm looking exactly for the same option, but didn't find the perfect solution.
Workaround is using type=number (http://www.w3schools.com/tags/att_input_type.asp). I just tried it on iOS and it works, but it defaults the Keyboard at the "123" Numeric-Special keyboard view, rather than the "ABC" Alphabet keyboard view.
But it indeed removes the Emoji keyboard!
Edit:
So this would work: <input type=number>.
I have a form which contains a lot of individual fields which contain numeric values. The issue I have is that on an iPad the on-screen keyboard is split between an alphabetic and numeric one like so:
The issue is that when switching between each individual form field, the iPad reverts to the alphabetic keyboard which is not disastrous but definitely inconvenient for the end user. Is there anything I can do to tell iPad which keyboard to show for a specific input type or some other way of keeping the numeric keyboard for certain form elements?
I'm specifically referring to developing for the web and not iOS apps. I'm sceptical and so far Googling has not brought up any results but I wonder if there is an input type that iPad might recognise as numeric automatically.
Change your input type. Instead of using a text input try one of the following to bring up the special keyboard (note: this is not unique to the iPad). This is going to be device-dependent and be supported depending on the device used.
<input type="number">
Shows the number pad
<input type="email">
Shows the text pad with the # symbol
<input type="url">
Shows the text pad with the .com button (if available)
<input type="text">
Shows the standard text pad
Use HTML5 field types
Change the field type:
<input type="text" name="SomeField">
To:
<input type="number" name="SomeField">
This should make the iPad and phones default to the numeric input pad.
http://www.w3schools.com/html/html5_form_input_types.asp
I'm building an HTML page to be viewed in mobile Safari [and other platforms]. The page lets the user specify several start and end times. They have to input at least two times, and possibly more depending on their situation.
I want the user to be able to input their times as numbers and punctuation using the numeric-SHIFT mode keyboard, i.e. the user will see fields like this:
And they'll get the numeric-SHIFT keyboard when they focus into the field:
Won't work:
<input type="time"> (and related datetime types) is not an option. The scrolly-wheel is unacceptable from an HCI perspective, particularly for repeated entries.
<input type="number"> does the right thing at first. It triggers the keyboard in numeric-SHIFT mode, i.e. the numeric & punctuation portions are visible by default. But when you exit the field, mobile Safari strips out punctuation (i.e. the colon). I tried turning off validation in the form using novalidate but that didn't work.
<input type="text" pattern="[0-9]*"> triggers the telephone keyboard with no way to enter the colon character.
I may just need a different RegExp in the PATTERN attribute, but each one I've tried triggers the normal alpha keyboard, and the user has to hit a key to get to the numeric-SHIFT keypad.
Can anyone tell me how to force the keyboard into numeric-SHIFT display without triggering harsh validation rules on the user's input?
Take a look at jQuery Mobile DateBox. here. Its possible you might want to rethink text input here. Maybe you want to go with a picker. Sencha Touch also has a DatePicker. I wrote an extension that implements a timepicker object. I'll throw it up on GitHub if you need me to.
autocomplete="off" is not what I am after. Basically, on my registration form there are fields "phone" and "password" placed one above the other. (see screenshot)
The "phone" field gets, annoyingly, prepopulated with a username, as I guess what the browser is doing - the browser finds a field of type password and assumes the text input field just before it is a username field. The effect is this:
Why I am not interested in the non-standard autocomplete attribute for the phone field, is that I do want user to be able to fill this form as easily as possible and if they have previously entered their phone number on other sites (into fields called "phone") they could benefit from this showing up as they start typing into the field. That's why I don't want to turn autocomplete off altogether.
I was thinking more in the direction of reorganizing the fields somehow to avoid this behaviour. Or some way of telling the browser that the field above the password field has nothing to do with it, or that the password field is not used for authentication purposes. Somehow mark it as that. Or inject some invisible element inbetween these two fields?
Any ideas?
Markup used:
<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">
I am getting this behaviour on Chrome, FF, (not sure about IE, got an archaic version of that on my machine, don't even want to start worrying about IE yet.)
Most password managers will search the first password field, and the closest text field before it.
So all you have to do is add invisible text and password fields (display:none) above "new password".
Firefox tries to interpret 3 password fields as a "change password" action, so if you don't want that you should be safe adding yet another invisible password field.
I had a similar issue with the set password field. Try
<input type="password" autocomplete="new-password">
From MDN input documentation:
autocomplete
This attribute indicates whether the value of the control can be automatically completed by the browser.
Possible values are:
....new-password: A new password (e.g. when creating an account or changing a password)
For the phone number issue, I set this and it stopped autocompleting the username there.
<input type="tel">
A home number cannot be 30 characters, this is probably why the browser is assuming it could be a username or login email due to the size. Change it to something real and see what happens.
Also, consider having 3 field for phone number, area code, prefix, suffix. Once a certain number of digits are filled, you can auto focus using JavaScript the next phone segment field so it's easier for user.
Have you also tried changing positions of fields? What's happened?
Also, just to make sure, you can turn off auto complete on a particular item during registration without worrying that it will be off during login (cuz it won't) unless you turned it off for the login fields as well, and of course you have no need to.
Also, delete your unused saved form auto complete stuff, could just be a local issue with your version, you may have entered a bad value one day in one of the browsers, and then you installed the other browser (chrome or FF), and then the newly installed browser copied the rules exactly as they were from your original browser.... So, you end up thinking it's a global issue with your form, simply because of one bad entry and because your second installed browser copied and replicated the bad entry rule from your first browser, making it look like a real, universal problem to you, get me? So try the browsers InPrivate modes, or try the browsers from a different installation or a different computer, or from a virtualpc instance you may have.
Otherwise, export all your setting from your browsers and uninstall both browsers, then reinstall from scratch FF and chrome, then test your webpage, then feel free to import your exported settings back.
Also, test on IE even if it is for the insight it may give you, know what I mean?
Hope this helps, let me know how you get on, and if you have any other questions.
UPDATE:
Given the method you've chosen, what you should be able to do is, when rendering the phone field, add a value=" " attribute into the input tag, instead of using JavaScript. This should prevent the pre-filling from occuring without needing to use javascript. Now, if you want to go one step further, you can do this:
During the OnLoad Event of when page loads, check the phone field using JavaScript, and if the value equals one space (" ") then overwrite it with an empty string using JavaScript once onLoad is triggered. Or, if the browser is still prefilling (i doubt it will but if it is) you can delay this check by a few hundred milliseconds and run the javascript a few hundred milliseconds after the page has loaded, or tie it to all or some of the input fields onFocus events, so as soon as any of the fields gain focus, you do the "does phone.value equals one space character (" ") and if it does, overwrite it with and empty string, i'm even more certain the browser isn't going to jump in and hijack that field in this situation. Although, as mentioned, even if you do this onLoad, i doubt the browser will hijack your field, as the pages/javascript onload occurs AFTER the browsers internal onLoad (DocumentComplete) event occurs, and worst case scenario, you can do the few hundred millisecond lag or onFocus method, but i doubt you will need these.
Let me know how it goes.
I tried disabling the input fields type=text& type=password after loading of the DOM then enabled all the disabled fields after certain milliseconds lets say 100. It seems to be working for me.
Try :
$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');
$("body").delay(10,function(){
$("input[type=text],input[type=password]").prop('disabled','');
});
});