maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
当前回答
这段代码对我来说运行得很好。
在type="number"的输入中,可以添加以下属性:
oninput="constrainUserInput(this.id)"
完整的输入是这样的:
<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>
注意:必须为这个方法分配输入和ID
然后你可以添加以下JavaScript到你的HTML,它基本上替换任何字符超过你的maxlength属性用一个空引号(本质上删除它们):
function constrainUserInput(id) {
let input = document.getElementById(id);
let value = input.value;
if (value.length > input.maxLength) {
input.value = value.substring(0, input.maxLength);
}
}
其他回答
这段代码对我来说运行得很好。
在type="number"的输入中,可以添加以下属性:
oninput="constrainUserInput(this.id)"
完整的输入是这样的:
<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>
注意:必须为这个方法分配输入和ID
然后你可以添加以下JavaScript到你的HTML,它基本上替换任何字符超过你的maxlength属性用一个空引号(本质上删除它们):
function constrainUserInput(id) {
let input = document.getElementById(id);
let value = input.value;
if (value.length > input.maxLength) {
input.value = value.substring(0, input.maxLength);
}
}
我有两种方法
首先:使用type="tel",它将像mobile中的type="number"一样工作,并接受maxlength:
<input type="tel" />
第二:使用一点JavaScript:
<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
最大长度将不能与<input type="number"工作,我知道的最好的方法是使用oninput事件限制最大长度。请看下面的代码。
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
我有这个问题在django形式。这就是我解题的代码。
HTML
<input type="tel" maxlength="6" oninput="this.value=this.value.replace(/[-]/g,'');"></input> <!-- I needed to remove the "-" sinc tell field accepts it. -->
Django形式
class TokenForm(forms.Form):
code = forms.CharField(
required=True,
label="Enter 6 digit confirmation code",
widget=forms.TextInput(
attrs={
"class": "form-control",
"placeholder": "Enter 6 digit code",
"type": "tel",
"maxlength":"6",
"oninput":"this.value=this.value.replace(/[-]/g,'');"
}
),
)
这也适用于Android
更改输入类型为文本,并使用"oninput"事件调用函数:
<input type="text" oninput="numberOnly(this.id);" maxlength="4" id="flight_number" name="number"/>
现在使用Javascript Regex过滤用户输入,并将其限制为数字:
function numberOnly(id) {
// Get element by id which passed as parameter within HTML element event
var element = document.getElementById(id);
// This removes any other character but numbers as entered by user
element.value = element.value.replace(/[^0-9]/gi, "");
}
演示:https://codepen.io/aslami/pen/GdPvRY