将动态文本字段设置为一定数量的字符

Setting dynamic text field to a certain number of characters

本文关键字：字符 动态 文本 字段 设置      更新时间：2023-09-26

如何设置填写表单动态文本字段，输入指定数量的字符，不少于也不多于，例如12。

maxlength="12"将数字限制为12，但最多为12。

下面的脚本代码，我会用这种方式保护它。这可以直接在php中完成，而不是在JavaScript中完成，因为你可以关闭它吗？

<script src="js/addInput.js" language="Javascript" type="text/javascript"></script>
<div id="dynamicInput">Serial No<b><font color="#FF0000">*</font></b> 
1: <input type="text" name="myInputs[]" maxlength="12" > np 6544/2014-01 
</div>
<input type="button" value="Add number" onClick="addInput('dynamicInput');">

kod-pliku-js/addInput.js

var counter = 1;
var limit = 20;
function addInput(divName){
  if (counter == limit) {
    alert("Add only 20 numbers");
  }
  else {
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "Serial number<font color='#FF0000'>*</font> " + (counter + 1) + ": <input type='text' maxlength='12' name='myInputs[]'>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
  }
}

在输入中使用最大长度

<input type="text" name="usrname" maxlength="20">

要将输入限制在12到12之间，请尝试此

<input type='text' pattern=".{12,12}" maxlength="12" name='myInputs[]'/>

关于限制，您应该在php中控制它，类似于：

if( count($_POST['myInputs']) > 20){
     //error
}

我认为在浏览器中避免JS是个坏主意，因为有人可以关闭它：

    1. 一个页面会失去很多动态和交互式的东西（我认为现在这毫无意义）
    1. 客户端浏览器可以代替服务器完成所有的脏工作
    1. 即使JS被禁用，用户也可以手动向服务器发送带有错误格式参数的GET请求
    1. 实现良好效果的一种常见做法是使用JS（通过处理用户活动防止错误数据输入）在浏览器中进行响应良好的设计，并在服务器上重新验证一些请求参数（对某些格式非常敏感）

所以在浏览器中尝试一下：

  <script>
    var input = document.getElementById( 'myFormId' )['exactInput']
        , lastCorrectValue = ''
        , neededSize = 12
    input.addEventListener( 'change', function ( e )
    {
      if ( e.target.value.length !== neededSize )
      {
        e.target.value = lastCorrectValue       
      }
      else
      {
        lastCorrectValue = e.target.value        
      }
    } )
  </script>
</body>

当输入失去焦点时，如果新数据的长度错误，它将放弃更改。

'change'事件在旧的浏览器中可能有缺陷，因此您也可以以相同的方式使用'blur'事件。

相关文章：