I'm using a input type="number" for my metabox, which works fine when you enter a new item and publish but going back to that same post and trying to update anything, it won't allow it and displays 'Invalid Input' next the fraction. I didn't know this was not supported thought type number meant all numbers, including fractions but what's confusing is why does the browser allow it to be posted but not updated since the value is already there? What's the best way to patch this up, making it into a text input instead?
Ok after some digging around I found the answer to my question, use steps to declare incremental values, worked as expected. More info here: http://www.w3.org/TR/html-markup/datatypes.html#common.data.float.positive
Related
In modern browsers the standard of autofill and autocomplete is to completely ignore autocomplete="off" for password fields that are placed in a form. And insert saved passwords, even if it's in a user management page. Although the reason is in the right place, it makes creating a user management page a huge pain.
My team's web application runs with angular 7 and currently only supports chrome. But there's a big possibility that we will need support other browsers like internet explorer, edge, firefox, etc.
I know this is a largely touched subject, and that I can find many questions with answers similar to this question (like this, or this). But every solution I've found so far has at least one big flaw.
What I've tried so far on chrome:
1) Use autocomplete="new-password"
It seems that chrome/chromium developers ignores even this for type="password".
2) Use type="text" autocomplete="new-password" with asterisk font family
This disables chrome from auto-filling the input field and hides the letters. But the big flaw is that the value is still there and can be copy-pasted in a different font family. The input field also loses the security of type="password" and any hacker can easily get the value.
3) Use -webkit-text-security
This is pretty much the same solution as the one before but this isn't even css standard and few browsers support it.
4) Replace value with *
This is the trickiest solution I've tried so far. When input value is changed I call a function in typescript that: Adds the new character to a local string, Change DOM value to * equal to the amount of characters, Return the locally saved value on (blur).
This leaves me with a large amount of problems to deal with including: Erasing any character in the string removes the last character always, In addition to the last problem the first character will always stay the same even if the value is completely erased, Having to know where in the string to remove characters.
This solution is less than ideal.
5) Disable password management for domain in browser settings
This really isn't a solution to the problem as it means that I expect the users to turn off password management for domain. It would also result in not saving the password on the login page as many users may need.
6) Randomise [name] and [autocomplete] values
By one way binding said values to a randomised string based on current time, I can ensure that the password field doesn't match any fields saved by the browser. Although many has reported that this works between all browsers, this doesn't seem to work for me at all when using chrome. For me chrome shows recommended password as long as the input is of type="password".
Solutions I've seen so far:
1) Use two input fields
This seems to me to work the same as my own solution 4). And will probably be just as troublesome to work with.
2) Use jQuery Disable Auto Fill Plugin
This seem to be very close to what I'm looking for but the problem is that it uses jQuery. All I can say is that I've been told that we're not using jQuery and that I probably won't be able to use the plugin directly.
I'm currently looking for a way to implement this using angular and would love any help or directions on this.
If you know of any solution that I haven't mentioned above, please post an answer or drop me a link in comments.
The best solution I've found so far is to use type="text" on password field and use autocomplete="off" on the form and every input field in it.
I won't mark this as an answer however as it still has the great flaw of losing the type="password" security functionality. Text fields also allows spell check which can be disabled with spellcheck="false". But I've read that it's possible to override this with browser settings.
This question will remain unanswered until a better solution is proposed.
I have been asked to help fix a bug in a web application that is mostly python (running Flask) which is what I know and why I offered to help. However my HTML knowledge is very bad and I need help. I've fixed the bug in the python code, but I want to make sure the user can't find more ways to break the application. It has to do with the form in HTML where users input the time for a deal. The input is in text format with the placeholder 'hh:mm:ss' but that doesn't stop them from entering all kinds of things other than a time in that format. If I had done this from the beginning I would have made this field a 'time' format but too many things depend on it being a text field now that I would rather just set some validation on this text input field.
The piece of code is:
<input type="text" name="time_left" id="time_left" placeholder="hh:mm:ss">
The only restriction is that the time can't be less than 00:00:00 and it can't be more than 01:30:00. I would love to just put a min/max attribute in here somewhere but I doubt it's that simple. Especially with it being text.
Can anyone advise me what I can do (the simpler the better, as I say, I'm not very good with HTML)
For HTML5 only solutions, there are two ways. One is to make it a type="time" input. It's value can still be read with input.value as a string, if that's of any concern to you.
<input type="time" min="00:00:00" max="01:30:00">
Browsers will allow steps of 1 minute. If you need second precision, add a step="1".
The other solution is to add the pattern attribute:
<input type="text" pattern="0(1:30:00|1:[012][0-9]:[0-5][0-9]|0:[0-5][0-9]:[0-5][0-9])">
Both solutions are viable and each has its advantages and disadvantages.
The latter will have better browser support, but for support closer to 100% you will either way need a JS library that takes over from the browser. I wrote Hyperform, that would do that (and more), but if it's just this one field you might be better off writing your own event handler and attaching it to the change event of that input field.
Edit: The regexp in the pattern attribute will distinguish several cases separated by |. The first and simplest is the max time 01:30:00. The next are the times from 01:00 to 01:29:59, and finally the times from 00:00 to 00:59:59.
I was unable to find the solution to this problem:
I use one in a webworks app. It's supose that this input will accept integers and float numbers.
The problem is: When I insert some data, for example 3.1415 the device removes the dot and inserts 31415.
I'm not using the input types inside a form so the "novalidate" option isn't possible.
I tried a lot of stuff to fix the problem. Any Idea?
Possible solutions(tricks):
- Use type = text and force the keyboard layout to be the numeric one.
- Disable the validation to this input (and no others).
Do you know how to do that? Do you know other solutions?
Regards. Pablo.
This is a know bug in Blackberry 10.
There are posts about it in their support forum, here is a link to one of them.
The only real way around it is to use a standard text input and validate the content yourself until this bug is fixed.
I just tested this on an internal build (10.2.1.x) and it is working prefect for me although I'm unable to track down a specific OS build number where the fix was implemented.
I'm currently working on a project in which I need to fetch street/city details from a DB using a zipcode. Dutch zipcodes use a "1111 AA" format, I would like to have this entered in a single input field while automatically adding the space in between the numbers and letters if the user doesn't enter the space himself.
I've been googling this quite a bit and all I have been able to find so far were ways of restricting the user input to numeric characters.
Thank you.
You'll need JavaScript to do that. In this case, jQuery can actually help you a lot. Here's a neat plugin to handle what you want:
There is no tool for such operations in HTML. You could code the functionality in JavaScript, using a keypress event handled that checks whether four consecutive digits have been entered and appends a space in the positive case. This gets more difficult if you consider what should happen if the user presses the delete key to remove characters. You would also have the problem that users may type “1111 AA” pressing the space bar, and what should happen then?
So it’s of questionable usefulness. It’s better to just accept the zip code with and without a space.
So I have an existing HTML page that has a field for Last 4 digits of Credit Card:
<input value="" name="Last4ofCC" maxlength="4" id="Last4ofCC1">
Works great, but a feature request just came in to make it a numeric field and not allow non-numeric characters.
At first I thought of plugging in some Javascript, but then I thought, why not just use an HTML5 element. I changed to the following:
<input type="number" value="" name="Last4ofCC" max="4" id="Last4ofCC1">
But not only does it still allow non-numeric characters, the max attribute doesn't work either! I'm testing this on FireFox 8, so not sure what the problem is.
Does anyone know what I've done wrong here?
you need to include the proper doctype at the top of your page in addition to changing your input types.
<!DOCTYPE html>
However, it's not going to do what you think it's going to. Setting an input as a type="number" will pretty much only get you the spinners on the side and tell the form what it should be. If you want to ensure only digits are entered, you will need to do a regex, like /^\d+$/ on keyup.
More info on HTML5
Yes, you can add HTML5 features to existing pages. Browser support to them is, at least at present, independent of any doctype stuff you may or may not have at the start of your page.
It is, however, probably not a good idea to use type="number" for reading four digits. It is meant for reading numeric data, and it will happily accept 42 without requiring any more digits, for example. Moreover, the user interface may even confuse the user. But if you use type="number", you should in this case set min="0" and max="9999".
A better HTML5 construct is pattern="[0-9]{4}" required. It is supposed to run a check on the input, checking that it consists of exactly four digits. This is supposed to happen even when JavaScript is disabled.
Since browser support is still rather limited, it’s a good idea to use JavaScript checks, too, as a convenience to the user.
'max' indicates the maximum value allowed, not the maximum number of characters.
Jason's answer is mostly correct. However, you should not do validation on keyup unless the user needs additional help. I'm the author of h5Validate. In the process of improving conversion rates in a large production shopping cart, we discovered that users get confused if they see a validation error message while they're still trying to type the number.
h5Validate first runs validation on change, and if the value is invalid, it will add keyup to help the user correct the field with each keystroke. This seems like a minor nitpick, but the difference it makes measures in the millions of dollars per year in revenue for large scale shopping cart systems.
Nothing, as far as I know Firefox doesn't support those yet, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29. Try Chrome to see the effect.
You can check out the latest form support for Firefox here (it's supposed to be support):
https://developer.mozilla.org/en/HTML/Forms_in_HTML
Also check out:
http://caniuse.com/#search=form%20validation
This jQuery plugin will add support for all browsers though. It's a safe approach that still uses HTML5 syntax:
http://ericleads.com/h5validate/
Good luck!