Question

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

maxlength =“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++;
  }
}

Answer 1

在输入中使用maxlength

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

Answer 2

要将输入从12限制为12，请尝试此

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

关于限制，您应该在php中控制它，例如：

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

Answer 3

我认为在浏览器中避免使用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'事件。

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

3 个答案: