Javascript 文本区域线检测_Javascript_Html_Textarea

Javascript 文本区域线检测

javascript html

Javascript 文本区域线检测,javascript,html,textarea,Javascript,Html,Textarea,我使用下面的代码来检测HTML文本区域中的行数这很好，但人们似乎一直在寻找绕过计数检查器的方法，使用空行或只有空格的行。对于我们的系统来说，要求每一行都有内容，有什么好方法可以做到这一点我知道这可以被用户绕过，所以也许我们应该为此使用PHP解决方案您可以在所有行上循环，修剪它们，然后在keyCode为13时测试长度，如下所示： for(let i of lines){ if(e.keyCode == 13 && i.trim().length == 0) e.preve

我使用下面的代码来检测HTML文本区域中的行数

这很好，但人们似乎一直在寻找绕过计数检查器的方法，使用空行或只有空格的行。对于我们的系统来说，要求每一行都有内容，有什么好方法可以做到这一点

我知道这可以被用户绕过，所以也许我们应该为此使用PHP解决方案

您可以在所有行上循环，修剪它们，然后在keyCode为13时测试长度，如下所示：

for(let i of lines){
  if(e.keyCode == 13 && i.trim().length == 0) e.preventDefault()
}

您还可以使用，而不是循环：

e.keyCode == 13 && lines.some(line => line.trim().length == 0) && e.preventDefault()

$'textarea'。在'keydown'上，函数E{ var text=$.writeLines.val var lines=text.split/\r\n | \n/ //在空行上禁用enter e、 keyCode==13&&lines.someline=>line.trim.length==0&&e.preventDefault //如果有5行，则禁用enter e、 keyCode==13&&lines.length>=5&&e.default } //完全禁用粘贴 .on'paste'，e=>e.default； //提交时： $'form'。在'submit'上，函数E{ var lines=text.split/\r\n | \n/ lines.someline=>line.trim.length==0 | | lines.length>5&&e.Default }

这是另一种可能的解决方案：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
      <title>Ilan's Test</title>
   </head>
   <body>

   <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="results">
                <textarea class="writeLines" cols="25" rows="25"></textarea>
                </div>
            </div>
         </div>
   </div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
      <script>
$(document).ready(function() {
    // Set the initial counter
    var count = 0;
    // On press function
        $('.writeLines').keypress(function(e) {
            // Check the count, if it's less than 5 keep going
            if (count >= 5) {
                // Count is >= 5, for fun I disabled the textarea; you can do what you need here
                console.log('we hit 5 lines');
                $('.writeLines').attr('disabled', 'disabled');
                return false
            } else {
                // Count is below 5, check is the enter key for a new line was pressed
                if(e.which == 13) {
                    // If the key is a new line (a return), add to the count and console log it
                    count = count + 1;
                    console.log('the current line count is: ' + count);
                } else {
                    // The key wasn't a new line, keep going and listen for the next key
                    return true;
                }
            }
        });
 }); 
      </script>
   </body>
</html>

如果用户真的想，如果您使用javascriptYes，他们总是可以修改您的检查功能。我知道这一点，但我们也会在后端发现这一点。您是否在后端执行检查？人们似乎一直在通过使用空行或只包含空格的行来找到绕过此计数检查程序的方法-我不明白这些场景是如何失败的你的代码。。。在我看来，仍然会有行尾，正则表达式应该是/\r\n | \n | \r/因为替代项是从左到右考虑的。字符串行\r\n break将在[line，break]中拆分，因为\r首先被发现是分隔符，\r\n甚至没有被考虑。这看起来很完美！还有一个问题，如果我写了一个新行，但删除了该行中的字符，然后按backspace完全删除该行，则计数将上升为1？否，代码会计算每按一次键的行数。我注意到这确实可以防止包含新行的复制和粘贴。我将更新代码以帮助防止这种情况。我更新了代码，我认为这会起作用。请注意，我也将keydown改为input，我尝试了该代码，但使用该代码可以有一个空行，但再次按enter键？

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
      <title>Ilan's Test</title>
   </head>
   <body>

   <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="results">
                <textarea class="writeLines" cols="25" rows="25"></textarea>
                </div>
            </div>
         </div>
   </div>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
      <script>
$(document).ready(function() {
    // Set the initial counter
    var count = 0;
    // On press function
        $('.writeLines').keypress(function(e) {
            // Check the count, if it's less than 5 keep going
            if (count >= 5) {
                // Count is >= 5, for fun I disabled the textarea; you can do what you need here
                console.log('we hit 5 lines');
                $('.writeLines').attr('disabled', 'disabled');
                return false
            } else {
                // Count is below 5, check is the enter key for a new line was pressed
                if(e.which == 13) {
                    // If the key is a new line (a return), add to the count and console log it
                    count = count + 1;
                    console.log('the current line count is: ' + count);
                } else {
                    // The key wasn't a new line, keep going and listen for the next key
                    return true;
                }
            }
        });
 }); 
      </script>
   </body>
</html>