In the last update of Chrome ("23.0.1271.64 m" in my case), it seems that input=time now includes seconds that are inactive and not clickable. This doesn't look nice in our site so I want to know if someone have found a way to remove seconds.
Unfortunately jsfiddle is down and I can't post an example there, but I post it here so people can read it anyway.
<html>
<head></head>
<body>
<input type="time" value="00:44" name="tiiiiden"/>
</body>
</html>
Since seconds is only "lying there" and are not editable, it's possible that this is a bug and it will be fixed pretty soon.
I know this is a very old question, but I just found the solution.
You must change your step to 60. If you leave your step default (1), it will have to increase one second, so it must show seconds at the field.
If you set your step to 60, it will increase 1 minute at a time, so it doesn't need to show the seconds.
#hend's solution of setting step to 60 works on an empty input, but if you load your form with values prepopulated, you'll find that seconds may reappear in a disabled state.
You can mask them and the dangling colon with the following CSS:
::-webkit-datetime-edit-second-field {
background: $color-white;
color: transparent;
margin-left: -3px;
position: absolute;
width: 1px;
}
Which yields the following:
Chrome 23 stable on OSX and Linux omits the seconds fields if it is unnecessary, and Chrome 24 beta on Windows also omits it. I recommend you to wait for Chrome 24 stable release.
I could not find any change/release notes for 23.0.1271.64 m that relates to any changes of the form input types but according to the latest working draft of the HTML5 markup documentation by W3C the input type="time" element does not support any other time format than "a valid partial-time as defined in RFC 3339", and that is hh:mm:ss.ff and hh:mm:ss.
As there are no attribute to specify your own date/time format on neither one of the date/time input elements you are stuck with the defined format(s).
From input type=time – time input control
Value: A valid partial-time as defined in [RFC 3339].
Examples:
23:20:50.52
17:39:57
From RFC 3339
time-secfrac = "." 1*DIGIT
partial-time = time-hour ":" time-minute ":" time-second [time-secfrac]
Finally, I am including a screenshot of how Chrome 23.0.1271.64 m renders the different time formats (on my machine);
<input type="time" value="23:20:50.52" />
<input type="time" value="17:39:57" />
<input type="time" value="13:37" />
<input type="time" value="" />
The markup is also available at jsFiddle.
Having the same problem. I used a fixed width with white-space: nowrap and overflow: hidden to hide the seconds, but when the input is focused the problem remains.
I had the same issue, if you are using a pre populated date to fill your input, just use this :
var myDate = new Date();
myDate.setSeconds(0);
myDate.setMilliseconds(0);
With the input tag like this:
<input type="datetime-local" step="60"/>
I personaly use angular but anything should work since Date is Javascript.
Android Chrome and Webbrowser still have that problem, so I made a smartphone-specific work-around using angularjs:
http://jsfiddle.net/Rvjuf/12/
How it works:
There are 2 elements that handle this:
<span>{{ timeDisplay }}</span>
<input type="time" ng-model="time">
In the link code, style the elements (can do that in CSS file as well), and bind to the click even of the span:
scope.inputElement.css({
position: "absolute",
"z-index": "-10000",
opacity: 0
});
scope.displayElement.css({
width: "200px",
height: "20px",
background: "blue",
color: "white",
});
scope.displayElement.bind("click", function(event) {
scope.inputElement[0].focus();
scope.inputElement[0].click();
});
Then, register a change listener for the time value and update the timeDisplay variable:
$scope.$watch('time', function(nv, ov) {
var parts = nv.split(" ")[0].split(":");
var hours = parts[0];
var minutes = parts[1];
$scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm");
});
So, when the user taps on the span, the input either gets focussed or clicked (iOS and ANDROID make some difference there), causing the native time picker UI to come up.
You can add a pattern attribute on your time input.
<input
type="time"
name="time"
pattern="[0-9]{2}:[0-9]{2}"
/>
We're using moment.js to fix this. You can round down the seconds to avoid the milis in a prePopulated input time by setting on controller with:
const localDate = moment(data.date).startOf('minute').toDate();
I hope it helps ;)
If you're using a Mac and step="60" still does not work, it could be your time preferences.
Chrome was using the "Short" time. I removed the seconds and milliseconds from the Short time, restarted Chrome and that solved it for me.
Found in: Language & Region > Advanced... > Times
Related
I am working with an HTML input element that is about 10 to 12 characters in size. A user is free to enter any length of string into this field. However, when the user is finished and leaves focus of the textbox, the field shows the latest portion of the string. I want it to show the initial part of the string.
Is this possible?
Sample HTML:
<label><input type="text" name="input" id="text_field" /></label>
One jQuery, dirty&hack-ish, but working solution (not sure about CSS or other possibilities):
$('body').on('blur','#text_field', function() {
new_field = $(this).clone();
$(this).remove();
$('label').append(new_field);
});
DEMO> http://jsfiddle.net/9zswjtqe/4/
Idea is - clone (deep) element on blur, remove it, and attach new element/clone (with desired text position this time). Tested in Firefox, IE, Chrome. Works fine.
Recently I have come across an issue where I wanted to disable auto-complete in all browsers.
Chrome has a new feature in settings where you can add a card number. And the requirement was to also disable that.
What worked in all browsers was to do this autocomplete=false at form level.
But this is not compliant with w3 rules, where they enforce to have autocomplete=off|on.
Can someone please explain to me why false works in all browsers?
even ie8, all firefox, safari etc., but it is not compliant.
You are right. Setting the autocomplete attribute to "off" does not disable Chrome autofill in more recent versions of Chrome.
However, you can set autocomplete to anything besides "on" or "off" ("false", "true", "nofill") and it will disable Chrome autofill.
This behavior is probably because the autocomplete attribute expects either an "on" or "off" value and doesn't do anything if you give it something else. So if you give it something other than those values, autofill falls apart/doesn't do anything.
With the current version of Chrome it has been found that setting the autocomplete attribute to "off" actually works now.
Also, I have found that this only works if you set the autocomplete attribute in each <input> tag of the form.
There has been a response to this ambiguity in the Chromium bug listings here.
Disclaimer: This was found to be true in Chrome version 47.0.2526.106 (64-bit)
After Chrome version 72.XX:
Chrome ignores autocomplete="off" autocomplete="no-fill" or autocomplete="randomText" both on field and form level.
The only option I found is to follow a work-around by tricking Chrome to populate the autofill on a dummy Textbox and password and then hide them from the user view.
Remember the old method with style="display: hidden" or style="visibility: hidden" is also ignored.
FIX:
So create a DIV with height: 0px;overflow:hidden which will still render the HTML elements but hide them from User's view.
Sample Code:
<div style="overflow: hidden; height: 0px;background: transparent;" data-description="dummyPanel for Chrome auto-fill issue">
<input type="text" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyUsername"></input>
<input type="password" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyPassword"></input>
</div>
Just add the above div within the HTML Form and it should work!
Use autocomplete="my-field-name" instead of autocomplete="off". Be careful what you call it, since some values are still recognized like autocomplete="country". I also found that using the placeholder attribute helped in some tricky scenarios.
Example:
<input type="text" name="field1" autocomplete="my-field-name1" placeholder="Enter your name">
Chrome recently stopped using autocomplete="off" because they thought it was overused by developers who didn't put much thought into whether or not the form should autocomplete. Thus they took out the old method and made us use a new one to ensure we really don't want it to autocomplete.
$("#selector").attr("autocomplete", "randomString");
This has worked reliably everytime for me.
Note : I have invoked this LOC on modal show event.
If anyones reading this and is having difficulty disabling autocomplete on username and password fields for new users, I found setting autocomplete="new-password" works in Chrome 77. It also prevented the username field from auto completing.
Ref: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Auto complete value other that off and false works.
autoComplete="nope"
autoComplete="foo"
autoComplete="boo"
autoComplete="anythingGoesHere"
Tested on chrome 76 and react 16.9.0
It's 2020 and if someone is still struggling with it as I did. The only solution that worked for me is as follows, setting autocomplete to any random string disables the autocomplete but it works only if its done after the page load. If that random string is kept as default value then chrome annoyingly sets it back to off. So what worked for me is (I'm using jquery) on document ready event, I added the following,
window.setTimeout(function () {
$('your-selector').attr('autocomplete', 'google-stop-doing-this');
}, 1000);
Without the timeout, Chrome still somehow resets its back to off.
if there any "password type input" in your form you can try this;
<input type="password" ..... autocomplete="new-password" />
Try this one:
.
<input type="text" autocomplete="__away">
autocomplete="none" perfectly works for angularjs and angular 7
Try this over input tag:
readonly onfocus="this.removeAttribute('readonly');
Example:
<input type="text" class="form-control" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');">
Setting the autocomplete attribute to true|false or on|off both does not work in all the conditions. Even when you try with to placeholder also it wont work.
I tried to use autocomplete="no" for avoiding the chrome autofill plugin.
This autocomplete="no" should be written inside a input line, for example
Although it might not be the most elegant solution, this worked for me:
JQuery version:
$("input:-internal-autofill-selected").val('');
VanillaJS version:
document.querySelectorAll("input:-internal-autofill-selected").forEach(function(item){item.value = '';})
When Chrome autofills an input field, the fields gets an internal pseudo element -internal-autofill-selected (which also gives the input the light blue background). We can use this pseudo element as selector in order to undo the Chrome autocomplete/autofill.
Please note that you may (depends on your implementation) need to wrap your code in a timeout as Chrome autofills after the DOM is loaded.
Not perfect but working solution using jquery
$(document).ready(function(){
if (navigator.userAgent.indexOf("Chrome") != -1) {
$("#selector").attr("autocomplete", "nope"); // to disable auto complete on chrome
}
})
autocomplete="one-time-code"
worked for me.
As an addition to #camiblanch answer
Adding autocomplete="off" is not gonna cut it.
Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.
I need to be able to set the focus on the hours portion of a datetime-local input control.
<input type="datetime-local" />
The solution also needs to be able to handle various datetime formats - which I am currently leaving to the browser to decide.
So this
becomes
Each browser renders input elements in their own way and most of the formatting/layout you see visually is done by the browser's code. Obviously you can still interact with these elements, but only with the native commands you are used to (focus, mouse over, click, etc).
It feels it should be possible to recreate the same state as with user interaction, but this stuff is buried in each individual browsers code.
I think your best bet would be to look into the wide range of JS date pickers that are already out there and see if any match up with your requirements, if not the closest to a solution you will find is to create your own with a bit of clever styling backed by the datetime input field
<input type="datetime-local" style="display:none" />
<div class="custom-datetime-local">
<span class="day">dd</span>/
<span class="month">mm</span>/
<span class="year">yyyy</span>
<span class="hour">--</span>:
<span class="minute">--</span>
</div>
https://jsfiddle.net/dh4a4f2p/
As far as I know, there is no way to focus on the hour of a datetime-local field. In fact, datetime-local field is not even supported by all browser yet. You cannot use datetime-local on Firefox and IE. You may ignore IE, but if Firefox is on the list too, you better reconsider if you should insist on using datetime-local.
If you are using normal javascript datetime-picker plugin, you may try to focus on the hour position by using the setSelectionRange() method provided by vanilla javascript.
For example, if you have a date input field inside a div with ID startDate, with the correct date-time format set, you can do that by:
var startDateBox = $("#startDate input")[0];
startDateBox.setSelectionRange(11, 13);
startDateBox.focus();
JS fiddle demo
Is there a way to prevent the LastPass browser extension from filling out a HTML-based form with an input field with the name "username"?
This is an hidden field, so I don't want any software to use this field for their purposes:
<input type="text" name="username" id="checkusername" maxlength="9" value="1999" class="longinput" style="display:none">
The solution should not be like "rename the input field".
Adding
data-lpignore="true"
to an input field disabled the grey LastPass [...] box for me.
Sourced from LastPass.com
Two conditions have to be met:
The form (not the element) needs to have autocomplete="off" attribute
Lastpass user needs to have this option enabled:
(old) Settings > Advanced > Allow pages to disable autofill
(new) Account Options > Extension Preferences > Advanced > Respect AutoComplete=off: allow websites to disable Autofill
So this depends on both user and the developer.
What worked for me is having word "-search-" in the id of the form, something like <form id="affiliate-search-form"> - and lastpass doesn't add its elements onto the form inputs. It works with something simpler like <form id="search"> but doesn't work with <form id="se1rch">
I know I'm late to the party here, but I found this when I was trying to stop lastpass from ruining my forms. #takeshin is correct in that autocomplete is not enough. I ended up doing the hack below just to hide the symbol. Not pretty, but I got rid of the icon.
If any lastpass developers are reading this, please give us an attribute to use, so we don't have to resort to stuff like this.
form[autocomplete="off"] input[type="text"] {
background-position: 150% 50% !important;
}
I think lastpass honors the autocomplete="off" attribute for inputs, but I'm not 100% sure.
EDIT
As others have pointed out. this only works if the user has last pass configured to honor this.
For me worked either type=search which is kinda equal to text or using role=note.
You can check the LastPass-JavaScript but it's huge, may be you can find some workaround there, from what I saw they only check 4 input types, so input type=search would be one workaround:
!c.form && ("text" == c.type || "password" == c.type || "url" == c.type || "email" == c.type) && lpIsVisible(c))
Also those are the role-keywords they seem to ignore:
var c = b.getAttribute("role");
switch (c) {
case "navigation":
case "banner":
case "contentinfo":
case "note":
case "search":
case "seealso":
case "columnheader":
case "presentation":
case "toolbar":
case "directory":`
I checked LastPass' onloadwff.js, prepare for 26.960 lines of code :)
Add "search" to input id
<input type="text" name="user" id="user-search"/>
Bit late to the party but I have just achieved this with modifying the form with:
<form autocomplete="off" name="lastpass-disable-search">
I guess this fools lastpass into thinking that it's a search form. This does not work for password fields however! Lastpass ignores the name field in this case.
The only way I've managed to do this is to add the following directly at the top of the form:
<form autocomplete="off">
<div id="lp" ><input type="text" /><input type="password" /></div><script type="text/javascript">setTimeout(function(){document.getElementById('lp').style.display = 'none'},75);</script>
</form>
It causes a nasty flicker but does remove the autofill nonsense - though it does still show the "generate password" widget. LastPass waits until domready and then checks to see if there are any visible password fields, so it's not possible to hide or shrink the mock fields above.
This ES6 style code was helpful for me as it added data-lpignore to all my input controls:
const elements = document.getElementsByTagName("INPUT");
for (let element of elements) {
element.setAttribute("data-lpignore", "true");
}
To access a specific INPUT control, one could write something like this:
document.getElementById('userInput').setAttribute("data-lpignore", "true");
Or, you can do it by class name:
const elements = document.getElementsByClassName('no-last-pass');
for (let element of elements) {
element.setAttribute("data-lpignore", "true");
}
For this latest October 2019 buggy release of Lastpass, this simple fix seems to be best.
Add
type="search"
to your input.
The lastpass routine checks the type attribute to determine what to do with its autofill, and it does nothing on this html5 type of "search." This fix is mildly hacky, but it's a one line change that can be easily removed when they fix their buggy script.
Note: After doing this, your input might appear to be styled differently by some browsers if they pick up on the type attribute. If you observe this, you can prevent it from happening by setting the browser-specific CSS properties -webkit-appearance and -moz-appearance to 'none' on your input.
None of the options here (autocomplete, data-lpignore etc.) prevented LastPass from auto-filling my form fields unfortunately. I took a more sledge-hammer approach to the problem and asynchronously set the input name attributes via JavaScript instead. The following jQuery-dependent function (invoked from the form's onsubmit event handler) did the trick:
function setInputNames() {
$('#myForm input').each(function(idx, el) {
el = $(el);
if (el.attr('tmp-name')) {
el.attr('name', el.attr('tmp-name'));
}
});
}
$('#myForm').submit(setInputNames);
In the form, I simply used tmp-name attributes in place of the equivalent name attributes. Example:
<form id="myForm" method="post" action="/someUrl">
<input name="username" type="text">
<input tmp-name="password" type="password">
</form>
Update 2019-03-20
I still ran into difficulties with the above on account of AngularJS depending upon form fields having name attributes in order for ngMessages to correctly present field validation error messages.
Ultimately, the only solution I could find to prevent LastPass filling password fields on my Password Change form was to:
Avoid using input[type=password]entirely, AND
to not have 'password' in the field name
Since I need to be able to submit the form normally in my case, I still employed my original solution to update the field names 'just in time'. To avoid using password input fields, I found this solution worked very nicely.
Here's what worked for me to prevent lastpass from filling a razor #Html.EditorFor box in Chrome:
Click the active LastPass icon in your toolbar, then go to Account Options > Extension Preferences.
On this screen check "Don't overwrite fields that are already filled" (at the bottom)
Next, click "advanced" on the left.
On this screen check "Respect AutoComplete=off: allow websites to disable Autofill".
I did not need to do anything special in my ASP cshtml form but I did have a default value in the form for the #Html.EditorFor box.
I hope this helps and works for someone. I could not find any Razor-specific help on this problem on the web so I thought I'd add this since I figured it out with the help of above link and contributions.
For someone who stumbles upon this - autocomplete="new-password" on password field prevents LastPass from filling the password, which in combination with data-lpignore="true" disables it at all
Try this one:
[data-lastpass-icon-root], [data-lastpass-root] {
display: none !important;
}
Tried the -search rename but for some reason that did not work. What worked for me is the following:
mark form to autocomplete - autocomplete="off"
change the form field input type to text
add a new class to your css to mask the input, simulates a password field
css bit: input.masker {
-webkit-text-security: disc;
}
Tried and tested in latest versions of FF and Chrome.
type="hidden" autocomplete="off"
Adding this to my input worked for me. (the input also had visibility: hidden css).
Update NOV 2021
I have noticed that all LastPass widgets are wrapped in div of class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
Works perfectly for me
None of these work as of 10/11/2022.
What I did was add the following to a fake password field
<input id="disable_autofill1" name="disable_autofill1"
style="height:0; width:0; background:transparent;
border:none;padding:0.3px;margin:0;display:block;"
type="password">
This seems to be enough to minimize the size this element takes on screen (pretty much 0 for me) while still not triggering last pass's vicious algorithm. Put it before the real password field.
I'm sure a variant of this could be used to fool last pass for other fields where we don't need autofill or to suggest a new password.
I'm writing an alarm web app. I have two number inputs, one for the hours, one for the minutes. Thus, when I use my keyboard arrows, they go from 0 to 23/59. Is there an HTML native way to make them go from 00 (01,02, et.) to 23/59 instead ?
I'm only worried about the UI aspects as my JS manages the missing 0 anyway.
EDIT - As requested :
What I have :
What I want :
Instead of going from 0,1,2 to 59, I'd like to automatically have a leading 0 when the number is smaller than 10 (00,01,02 to 59).
I use this to just prepend zeros as needed:
<script>
function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
input.value = '0' + input.value;
}
}
</script>
And I just call that on the input's various events how ever works best for me, for instance:
<input type="number"
value="00"
onchange="leadingZeros(this)"
onkeyup="leadingZeros(this)"
onclick="leadingZeros(this)" />
It's not an ideal solution, mainly because there's a slight visual change as the user changes the number and the zero is prepended, but it works for me :)
Edit: Forgot to mention, I appreciate the answer asked for a native solution without javascript, but I wanted to provide something for people landing here through a Google search.
I'm afraid there is not native HTML way to do that unless using a Select tag. If you are using a text input you have to add the leading 0 on the 10 first values by javascript.
The correct, modern solution to OP's problem would be to use a input with type=time and then they don't have to worry about leading zeros or any of this other stuffs.
Adding on to some of the other answers that suggest using an event listener. I've tested this with jquery in chrome and it seems to work well with the padding without the slight flashing side effect.
<input type="number" id="input-element-id" value="00">
<script>
$('#input-element-id').on('input', function() {
const value = $(this).prop('value')
$(this).prop('value', value.padStart(2, '0'))
})
</script>