Limit characters does not work after using Ctrl + V

Navigation
1

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

Example:

  • Type 9 characters
  • And then use Crtl + V (failure), this is allowing you to enter more than 10 characters.

    • Follow 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: link

    Any solution?

        
    asked by anonymous 21.09.2017 / 23:18

    2 answers

    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 answer: link

    If anyone wants to improve my response, feel free to do so.

        
    22.09.2017 / 18:06
    2

    I believe that if you do a single function and check with .summernote('code') the amount of text, to remove the markup and make the 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 you from adding more text if you just want to show it 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>
        
    22.09.2017 / 00:20
    Remove virtual properties from TypeDescriptor.GetProperties () Search for id Mongo