HTML maxlength attribute not working on chrome and safari?
HtmlHtml Problem Overview
<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius">
This is my HTML, taken with firebug (on chrome).
I am allowed to write as much as characters as I want in the form field - in Chrome and Safari.
When on Firefox or IE10, the limit is fine.
I haven't found this issue around on the net.
Note: type="number" - not text.
Anyone saw this issue before?
Html Solutions
Solution 1 - Html
Max length will not work with <input type="number" the best way i know is to use oninput event to limit the maxlength. Please see the below code.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
Solution 2 - Html
Use the max attribute for inputs of type="number". It will specify the highest possible number that you may insert
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
<input type="number" min="1" max="999" />
See this example
EDIT
If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this example
Solution 3 - Html
The maxlength attribute does not apply to an input of type="number"
From W3 HTML5 spec concerning type="number"
> The following content attributes must not be specified and do not > apply to the element: accept, alt, checked, dirname, formaction, > formenctype, formmethod, formnovalidate, formtarget, height, > maxlength, multiple, pattern, size, src, and width.
Source: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number (under Bookkeeping details)
In FF and IE, the input is falling back to be a text input and therefore, maxlength applies to the input. Once FF and IE implement type="number", they should also implement it in a way where maxlength does not apply.
Solution 4 - Html
For those who still can't get it to work... Try this to fire up the fatter number pads:
<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" />
And the js:
$('input[name="no1"]').keypress(function() {
if (this.value.length >= 1) {
return false;
}
});
Solution 5 - Html
Here is an example using type="number" and maxlength, that works with Chrome, IE and others. Hope it helps!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function test(id, event) {
var element = $("#" + id);
var len = element.val().length + 1;
var max = element.attr("maxlength");
var cond = (46 < event.which && event.which < 58) || (46 < event.keyCode && event.keyCode < 58);
if (!(cond && len <= max)) {
event.preventDefault();
return false;
}
}
</script>
</head>
<body>
<input id="test" size="3" type="number" maxlength="3" onkeypress="test(this.id, event)">
</body>
</html>
Solution 6 - Html
Speaking of HTML 4.01 there is no such type as "number". Speaking of HTML 5 FF and IE do not yet know the number type if http://www.w3schools.com/html5/html5_form_input_types.asp is correct.
/edit: So FF and IE will probably fallback to text and this is why maxlength will work.
Solution 7 - Html
I solved problem using this jQuery codes:
$('input[type="number"]').on('keypress', function (e) {
var maxlength = $(this).prop('maxlength');
if (maxlength !== -1) { // Prevent execute statement for non-set maxlength prop inputs
var length = $(this).val().trim().length;
if (length + 1 > maxlength) e.preventDefault();
}
});
Set maxlength attribute for every input[type="number"] that you want, just like text inputs.