限制表单输入文本字段中允许的字符数

如何限制用户在文本框中最多只能输入5个字符？

下面是作为我表单一部分的输入栏:

<input type="text" id="sessionNo" name="sessionNum" />

它使用了 maxSize 之类的东西吗？

441840 次浏览
小开
最佳答案

最大长度 :

将被接受为输入的最大字符数。这可以大于 SIZE 指定的值，在这种情况下，字段 将适当滚动。默认是无限的。

<input type="text" maxlength="2" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />

但是，这可能会受到您的处理程序的影响，也可能不会。您可能还需要使用或添加另一个处理程序函数来测试长度。

小开

最简单的方法是:

maxlength="5"

因此. . 将这个属性添加到您的控件中:

<input type="text"
id="sessionNo"
name="sessionNum"
onkeypress="return isNumberKey(event)"
maxlength="5" />
小开

在标题中添加以下内容:

<script language="javascript" type="text/javascript">
function limitText(limitField, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
}
</script>


<input type="text" id="sessionNo" name="sessionNum" onKeyDown="limitText(this,5);"
onKeyUp="limitText(this,5);"" />
小开

根据 W3c，MAXLENGTH 属性的默认值是一个无限制的数字。因此，如果您不指定最大值，用户可以剪切和粘贴圣经几次，并将其粘贴到您的表单中。

即使你将 MAXLENGTH 指定为一个合理的数字，在处理之前(使用 php 或 asp 之类的东西)也要确保你仔细检查了服务器上提交的数据的长度，因为无论如何都很容易绕过基本的 MAXLENGTH 限制

小开

我总是这样做:

$(document).ready(function() {
var maxChars = $("#sessionNum");
var max_length = maxChars.attr('maxlength');
if (max_length > 0) {
maxChars.on('keyup', function(e) {
length = new Number(maxChars.val().length);
counter = max_length - length;
$("#sessionNum_counter").text(counter);
});
}
});

输入:

<input name="sessionNum" id="sessionNum" maxlength="5" type="text">
Number of chars: <span id="sessionNum_counter">5</span>
小开

简单点

<input type="text" maxlength="3" />

并使用警报来显示使用了 max 字符。

小开 
<input type="text" maxlength="5">

输入的最大字母数是5。

小开

你可以用 <input type = "text" maxlength="9"> 或者

<input type = "number" maxlength="9">代表数字 或者 电子邮件 <input type = "email" maxlength="9"> 验证会出现

小开

最大长度

将被接受为输入的最大字符数。 Maxlength 属性指定元素中允许的最大字符数。

Maxlength W3学校

<form action="/action_page.php">
Username: <input type="text" name="usrname" maxlength="5"><br>
<input type="submit" value="Submit">
</form>
小开 
<input type="number" id="xxx" name="xxx" oninput="maxLengthCheck(this)" maxlength="10">


function maxLengthCheck(object) {
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
小开

使用 maxlength = “字符数”

<input type="text" id="sessionNo" name="sessionNum" maxlenght="7" />
小开 
<input type="text" name="MobileNumber" id="MobileNumber" maxlength="10" onkeypress="checkNumber(event);"  placeholder="MobileNumber">


<script>
function checkNumber(key) {
console.log(key);
var inputNumber = document.querySelector("#MobileNumber").value;
if(key.key >= 0 && key.key <= 9) {
inputNumber += key.key;
}
else {
key.preventDefault();
}
}
</script>
小开

下面的代码包括一个计数..。

var count = 1;


do {
function count_down(obj, count){


let element = document.getElementById('count'+ count);


element.innerHTML = 80 - obj.value.length;


if(80 - obj.value.length < 5){
element.style.color = "firebrick";
}else{
element.style.color = "#333";
}
}
count++;
} while (count < 20); 
.text-input {
padding: 8px 16px;
width: 50%;
margin-bottom: 5px;
margin-top: 10px;
font-size: 20px;
font-weight: 700;
font-family: Raleway;
border: 1px solid dodgerblue;
}
<p><input placeholder="Title" id="bike-input-title" onkeyup="count_down(this, 3)" maxlength="80"  class="text-input" name="bikeTitle" ></p>
<span id="count3" style="float: right; font-family: Raleway; font-size:20px; font-weight:600; margin-top:-5px;">80</span><br>

小开

晚了，但是如果你想要一个完整的证明方法来限制数字或者字母，这只是一个 javascript 并且也限制了字符的长度:

更改 .slice之后的第二个数字以设置字符数。这对我来说比 maxlength更有效。

返回文章页面数字:

oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1').slice(0, 11);

返回文章页面信件:

oninput="this.value=this.value.replace(/[^A-Za-z\s]/g,'').slice(0,20);"

完整的例子:

<input type="text" name="MobileNumber" id="MobileNumber" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1').slice(0, 11);"/>

提交答案