对于以下标记，“maxlength”、“min”或“max”HTML 属性似乎都无法在 iPhone 上达到预期效果：
<input type="number" maxlength="2" min="0" max="99"/>
不限制位数或输入数字的值，而是保留在 iPhone 4 上输入的数字。此标记适用于我们测试的大多数其他手机。
什么给予？
有什么解决办法吗？
如果它对解决方案很重要，我们使用 jQuery mobile。
谢谢！
示例
JS
function limit(element)
{
var max_chars = 2;
if(element.value.length > max_chars) {
element.value = element.value.substr(0, max_chars);
}
}
HTML
<input type="number" onkeydown="limit(this);" onkeyup="limit(this);">
如果您使用 jQuery，您可以稍微整理一下 JavaScript：
JS
var max_chars = 2;
$('#input').keydown( function(e){
if ($(this).val().length >= max_chars) {
$(this).val($(this).val().substr(0, max_chars));
}
});
$('#input').keyup( function(e){
if ($(this).val().length >= max_chars) {
$(this).val($(this).val().substr(0, max_chars));
}
});
HTML
<input type="number" id="input">
您可以使用此代码：
<input type="number" onkeypress="limitKeypress(event,this.value,2)"/>
和js代码：
function limitKeypress(event, value, maxLength) {
if (value != undefined && value.toString().length >= maxLength) {
event.preventDefault();
}
}
jQuery 的另一个选项，但是 onkeypress 事件...;)
$("input[type=number]").on('keypress',function(e) {
var $that = $(this),
maxlength = $that.attr('maxlength')
if($.isNumeric(maxlength)){
if($that.val().length == maxlength) { e.preventDefault(); return; }
$that.val($that.val().substr(0, maxlength));
};
});
根据 MDN，
maxlengthnumber<input type="number" min="0" max="99" />
或
<input type="range" min="0" max="99" />
正如 Andrew 所说，您需要将类型更改为范围，此外，您还会遇到 IE 和 FF 以及可能旧的 ipad 浏览器的问题，因为它来自 HTML 5，而且它是“一种新的”。看看这个用 JS 尝试过范围的人， 使用javascript指定要在数字字段中输入的数字范围
您可以使用 JavaScript 检查框中有多少个字符，如果太多，则删除一个： http://www.webcodingtech.com/javascript/limit-input-text.php
这里有一个更优化的 jQuery 版本，可以缓存选择器。 它还使用了输入类型数字不支持的 maxlength 属性。
// limits the input based on the maxlength attribute, this is by default no supported by input type number
$("input[type=number]").on('keydown keyup',function(){
var $that = $(this),
maxlength = $that.attr('maxlength')
if($.isNumeric(maxlength)){
$that.val($that.val().substr(0, maxlength));
};
});
我使用输入事件监听器
var storeName = document.getElementById('storeName')
var storeNameCounter = document.getElementById('storeNameCounter')
storeName.addEventListener('input', (event) => {
var max_chars = 50
if(event.target.value.length > max_chars) {
event.target.value = event.target.value.substr(0, max_chars)
}
storeNameCounter.innerHTML = `${event.target.value.length}/50`
})<input type="text"
id="storeName"
name="store_name"
class="store_name"
placeholder="store name"
x-moz-errormessage="This field should not be left blank."
maxlength="500" required>
<span id="storeNameCounter" class="store_name_counter">0/50</span> 我知道这个问题已有一年了，但我不喜欢所选的答案。因为它的工作方式是显示键入的字符，然后将其删除。
相比之下，我会提出另一种类似于威尔的方法，它只是更好地防止角色被显示。另外，我还添加了一个
else ifHTML
<input type="number" onkeydown="limit(this);">
JS
function limit(element)
{
var max_chars = 2;
if (arguments[1].char !== "\b" && arguments[1].key !== "Left" && arguments[1].key !== "Right") {
if (element.value.length >= max_chars) {
return false;
} else if (isNaN(arguments[1].char)) {
return false;
}
}
}
这是 Tripex 答案，针对允许删除键进行了优化，在打字和粘贴时有效。
$(document).on("keyup", "#your_element", function(e) {
var $that = $(this),
maxlength = $that.attr('maxlength');
if ($.isNumeric(maxlength)){
if($that.val().length === maxlength) {
e.preventDefault();
// If keyCode is not delete key
if (e.keyCode !== 64) {
return;
}
}
$that.val($that.val().substr(0, maxlength));
}
});
我使用 jQuery 的解决方案：
JS
function maxlength(event)
{
const ele = event.target;
const maxlength = ele.maxLength;
const value = ele.value;
if (event.type == 'keypress')
{
if (value.length >= maxlength)
{
event.preventDefault();
}
}
else if (event.type == 'keyup')
{
if (value.length > maxlength)
{
ele.value = value.substring(0, maxlength);
}
}
}
$('input[type=number][maxlength]').on('keypress keyup', maxlength);
HTML
<input type="number" maxlength="2">