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

发布于 2024-12-21 17:10:42 字数 181 浏览 2 评论 0原文

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

下面是作为我的表单一部分的输入字段：

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

它是否使用 maxSize 之类的东西或类似的东西？

原文

How do I limit or restrict the user to only enter a maximum of five characters in the textbox?

Below is the input field as part of my form:

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

Is it using something like maxSize or something like that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兮子 2024-12-28 17:10:42

最大长度：

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

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

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

maxlength:

The maximum number of characters that will be accepted as input. This can be greater that specified by SIZE , in which case the field
will scroll appropriately. The default is unlimited.

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

However, this may or may not be affected by your handler. You may need to use or add another handler function to test for length, as well.

回复收藏 0 原文

﹉夏雨初晴づ 2024-12-28 17:10:42

最简单的方法是：

maxlength="5"

所以..将此属性添加到您的控件中：

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

The simplest way to do so:

maxlength="5"

So.. Adding this attribute to your control:

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

回复收藏 0 原文

梦冥 2024-12-28 17:10:42

将以下内容添加到标题中：

<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);"" />

Add the following to the header:

<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);"" />

回复收藏 0 原文

银河中√捞星星 2024-12-28 17:10:42

让它变得更简单

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

，并使用警报来显示已使用最大字符数。

Make it simpler

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

and use an alert to show that max chars have been used.

回复收藏 0 原文

森林很绿却致人迷途 2024-12-28 17:10:42

根据 w3c，MAXLENGTH 属性的默认值是无限个。因此，如果您没有指定最大值，用户可以多次剪切并粘贴圣经并将其粘贴到您的表单中。

即使您确实将 MAXLENGTH 指定为合理的数字，请确保在处理之前仔细检查服务器上提交的数据的长度（使用 php 或 asp 等），因为无论如何，绕过基本的 MAXLENGTH 限制都很容易

回复收藏 0 原文

末蓝 2024-12-28 17:10:42

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

输入中可包含的最大字母数量为 5。

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

the maximum amount of letters that can be in the input is 5.

回复收藏 0 原文

半衾梦 2024-12-28 17:10:42

Maxlength

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

Maxlength W3 学校

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

Maxlength

The maximum number of characters that will be accepted as input.
The maxlength attribute specifies the maximum number of characters allowed in the element.

Maxlength W3 schools

<form action="/action_page.php">
    Username: <input type="text" name="usrname" maxlength="5"><br>
    <input type="submit" value="Submit">
</form>

回复收藏 0 原文

我最亲爱的 2024-12-28 17:10:42

以下代码包含一个计数...

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>

The following code includes a counted...

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>

回复收藏 0 原文

对你的占有欲 2024-12-28 17:10:42

我总是这样做：

$(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>

I always do it like this:

$(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:

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

回复收藏 0 原文

七堇年 2024-12-28 17:10:42

您可以使用
<输入类型=“文本”maxlength=“9”>
或

对于数字
或者
用于电子邮件
验证将会显示

回复收藏 0 原文

昔梦 2024-12-28 17:10:42

<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)
}

<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)
}

回复收藏 0 原文

深居我梦 2024-12-28 17:10:42

不要为旧的解决方案而烦恼。
这是您需要的：

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    // Allowing only numbers and specific keys (backspace, delete, arrow keys)
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    // Checking maximum character limit
    if (evt.target.value.length >= 11) {
        return false;
    }
    return true;
}

<input type="text" placeholder="ID Number" maxlength="11" onkeypress="return isNumberKey(event)">

Don't bother with old solutions.
Here's what you need:

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    // Allowing only numbers and specific keys (backspace, delete, arrow keys)
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    // Checking maximum character limit
    if (evt.target.value.length >= 11) {
        return false;
    }
    return true;
}

<input type="text" placeholder="ID Number" maxlength="11" onkeypress="return isNumberKey(event)">

回复收藏 0 原文

缱绻入梦 2024-12-28 17:10:42

晚了，但如果你想要一个完整的证明方法来限制数字或字母，这只是 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);"/>

Late to the party, but if you want a full proof way to restrict numbers or letters that is simply javascript and also limits length of characters:

Change the second number after .slice to set the how many characters. This has worked much better for me then maxlength.

Just Numbers:

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

Just Letters:

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

Full example:

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

回复收藏 0 原文

计㈡愣 2024-12-28 17:10:42

使用 maxlenght="字符数"

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

Use maxlenght="number of charcters"

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

回复收藏 0 原文

半步萧音过轻尘 2024-12-28 17:10:42

<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>

<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>

回复收藏 0 原文

~没有更多了~