Limit characters does not work after using Ctrl+ V

Asked

Viewed 157 times

1

The idea is not to allow typing more than 10 characters. The Crtl + V is failing.

Example:

  1. Type 9 characters in
  2. And then use Crtl + V (fault), it is at this point is allowed to type more than 10 characters.

Follows JS code:

$(document).ready(function () {
    $('#summernote').summernote({
        toolbar: [
          ['style', ['bold', 'italic', 'underline', 'clear']]
        ],
        callbacks: {
            onKeydown: function (e) { 
                var t = e.currentTarget.innerText; 
                if (t.trim().length >= 10) {
                    //delete key
                    if (e.keyCode != 8)
                    e.preventDefault(); 
                } 
            },
            onKeyup: function (e) {
                var t = e.currentTarget.innerText;
                $('#maxContentPost').text(10 - t.trim().length);
            },
            onPaste: function (e) {
                var t = e.currentTarget.innerText;
                var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                e.preventDefault();
                var all = t + bufferText;
                document.execCommand('insertText', false, all.trim().substring(0, 10));
                $('#maxContentPost').text(10 - t.length);
            }
        }
    });
});

Or if you prefer Jsfiddle: https://jsfiddle.net/sz1fj325/3/

Some solution ?

javascript
  • 1

    Wouldn’t it be better to create a unique event that fires after a timeout and clears the field?

2 answers

2

I believe if I perform a unique function and check with .summernote('code') the amount of text, to remove the markup and count use Regex: .replace(/<[^>]+>/g, "")

$(document).ready(function () {
    var meuEditor = $('#summernote');

    var timeout, limite = 10;

    function limitar() {
       var conteudo = meuEditor.summernote('code');
       var semMark = conteudo.replace(/<[^>]+>/g, "");

       $('#maxContentPost').text(limite - conteudo.length);

       if (conteudo.length > limite) {
            meuEditor.prop('disabled', true);
            meuEditor.summernote('code', conteudo.substr(0, 10));
            meuEditor.prop('disabled', false);
       }
    }

    setTimeout(limitar, 10);
    
    meuEditor.summernote({
        toolbar: [
          ['style', ['bold', 'italic', 'underline', 'clear']]
        ],
        callbacks: {
            onKeyup: function () {
                setTimeout(limitar, 0);
            },
            onPaste: function () {
                setTimeout(limitar, 0);
            }
        }
    });
});
<!-- include libraries(jQuery, bootstrap) -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>

<div id="summernote">Hello Summernote</div>
<div id="maxContentPost"></div>

Of course this way it will block from adding more text, if you just want to show that exceeded do so:

$(document).ready(function () {
    var meuEditor = $('#summernote');

    var timeout, limite = 10;

    function limitar() {
       var conteudo = meuEditor.summernote('code');
       var semMark = conteudo.replace(/<[^>]+>/g, "");

       $('#maxContentPost').text(limite - conteudo.length);
    }

    setTimeout(limitar, 10);
    
    meuEditor.summernote({
        toolbar: [
          ['style', ['bold', 'italic', 'underline', 'clear']]
        ],
        callbacks: {
            onKeyup: function () {
                setTimeout(limitar, 0);
            },
            onPaste: function () {
                setTimeout(limitar, 0);
            }
        }
    });
});
<!-- include libraries(jQuery, bootstrap) -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>

<div id="summernote">Hello Summernote</div>
<div id="maxContentPost"></div>

  • Why not put onKeydown: function () { setTimeout(limitar, 0); } ? Looks like I fixed it when you hold the key. It’s not even ?

  • 1

    is to avoid conflicts, I am reviewing the code to make it a little better, as soon as I get I edit the response and I warn you.

  • William looks at my answer, and sees what he thinks !!!

0


After a long time, I found a solution:

$(document).ready(function() {

  var limite = 10;
  var meuEditor = $('#summernote');

  meuEditor.summernote({
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']]
    ],
    callbacks: {
      onInit: function() {

        var length = $('#summernote').summernote('code').replace(/<[^>]+>/g, "").length;

        $('#maxContentPost').text(limite - length);
      },
      onKeydown: function(e) {
        var t = e.currentTarget.innerText;
        if (t.trim().length >= limite) {
          // delete key 
          if (e.keyCode != 8)
            e.preventDefault();
        }
      },
      onKeyup: function(e) {
        var t = e.currentTarget.innerText;
        var teste = $('#maxContentPost').text(limite - t.trim().length);
        $('#maxContentPost').text(limite - t.trim().length);
      },
      onPaste: function(e) {
        var t = e.currentTarget.innerText;
        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

        if (t.length + bufferText.length >= limite) {
          e.preventDefault();
          var bufferTextAllowed = bufferText.trim().substring(0, limite - t.length);
          setTimeout(function() { 
            // envolva um temporizador para evitar problemas no Firefox
            document.execCommand('insertText', false, bufferTextAllowed);
            $('#maxContentPost').text(limite - t.length);
          }, 10)
        }
      }
    }

  });
});
<!-- include libraries(jQuery, bootstrap) -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js-->
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>

<div id="summernote">Olá</div>
<div id="maxContentPost"></div>

Original response: https://github.com/summernote/summernote/issues/118#issuecomment-297114322

If anyone wishes to improve my answer, be my guest.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.