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

Posted 2023-02-22

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

【英文标题】：Limit number of characters allowed in form input text field

【发布时间】：2012-01-22 15:23:45

【问题描述】：

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

下面是我表单中的输入字段：

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

它是在使用 maxSize 之类的东西吗？

【问题讨论】：

这里<input type="text" maxlength="5"> 现场演示： jsfiddle.net/mcBbW/1

【参考方案1】：

maxlength:

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

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

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

【讨论】：

我发现这个答案在输入阶段进行限制时很有用。您还可以在提交时在验证阶段限制它，并使用pattern 属性弹出验证消息。见***.com/questions/10281962/…

【参考方案2】：

最简单的方法：

maxlength="5"

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

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

【参考方案3】：

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

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

【讨论】：

this.form.sessionNo 似乎有点可疑。为什么不只是this？此外，limitCount 和 limitNum 似乎也有问题/没有必要？

已更正。如果您想将其限制为某些字符或数字，则可以这样做，但如果您不关心这一点，那么 max Length 就可以了。所以说如果你希望值在 1-50 之间，你可以或所有正数，等等。

this.form.sessionNo 似乎仍然不对。在这种情况下，this 将指向input，而不是document。

仍然不对，它也没有引用form。 this 就是您所需要的。此外，从技术上讲，如果您想通过 form 引用元素，则应使用 (form/input) name，而不是 id，即：document.formName.sessionNum。

正确我输入快速它之前被包裹在一个表单中。但是您只需将 ref 传递给函数的输入以获取该字段的当前值，然后添加您想要限制该字段的任何逻辑。

【参考方案4】：

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

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

【讨论】：

@lopezdp，有多种方法可以“绕过”html/javascript 限制。最容易检查的是用 Chrome 打开你的页面，“检查元素”并手动修改 HTML。更复杂的解决方法 - 编写一个脚本，将忽略任何限制（使用 curl 库或类似的东西）发布数据。作为后端开发人员，您永远不应该信任数据的前端验证 - 所有规则都应该在服务器上重复。前端验证只是一种通过指出明显错误而不向服务器发出请求来为用户节省时间的方法。

【参考方案5】：

让它更简单

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

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

【参考方案6】：

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

最多可以输入 5 个字母。

【参考方案7】：

最大长度

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

Maxlength W3 schools

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

【参考方案8】：

我总是这样：

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

【参考方案9】：

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

<input type = "number" maxlength="9"> 用于数字 要么 <input type = "email" maxlength="9"> 用于电子邮件 验证将显示

【参考方案10】：

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

【参考方案11】：

使用 maxlenght="字符数"

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

【参考方案12】：

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

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>

【参考方案13】：

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