1

Tenho essa função JavaScript que só permite ao usuário digitar 42 caracteres. Alguém pode me ajudar, preciso que toda vez ao chegar em 42 caracteres pule uma linha ao invés de bloquear a digitação. Meu problema está em onKeydown e onKeyup.

$('.summernote').summernote({
    height: 150,
    lang: 'pt-BR',
    toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['insert', ['picture']],
        ['codeview', ['codeview']]
    ],
    disableDragAndDrop: true,
    callbacks:{
        onKeydown: function (e) { 
            var t = e.currentTarget.innerText; 
            if (t.trim().length >= 42) {
                //delete key
                if (e.keyCode != 8)
                e.preventDefault(); 
            } 
        },
        onKeyup: function (e) {
            var t = e.currentTarget.innerText;
            $('#maxContentPost').text(42 - t.trim().length);
        },
        onImageUpload: function(files) {
            moveImagem(files[0]);
        },

        onMediaDelete : function($target, editor, $editable) {
            var nome = $target.data('filename');
            if(apagaImagem(nome)){
                $target.remove();
            }
        }
    }
}); 
1
  • achei um jeito, é meio "gambi" mas vai te servir, vou postar jaja
    – Leandro RR
    Commented 7/02/2018 às 16:48

2 Respostas 2

1

Apenas verifique se o .val() é divisível por quanto quer quebrar a linha (42 no seu caso), depois insira um \n, usando .val($(this).val()+"\n") como exemplo. Você deve remover as quebras de linhas anteriores, caso contrario eles também serão considerados um caractere, portanto use o .replace(/(\r\n|\n|\r)/gm, "")!

$('textarea').on('keydown', function(){

   value = $(this).val();

   if(value.length !== 0 && value.replace(/(\r\n|\n|\r)/gm, "").length % 5 === 0){
      $(this).val(value+"\n");
   }


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

Nesse caso a cada 5 dígitos irá inserir uma nova linha. Existe BUGS nisto, pois o usuário poderá alterar o texto escrito anteriormente, isso não é verificado pela função, mas pode adicionar alguma solução para isso.

1
  • Desculpe minha ignorância, mas como eu poderia adicionar isso dentro do summernote? Ele cria a textarea a partir do summernote, sem atribuir ID. Commented 19/08/2016 às 19:12
1

primeiro, atribua a instância do summernote à uma variável, para uso posteriormente, ele já possui um método para adicionar parágrafos, usando o callbacks:{} você adiciona o evento onKeyup (tentei com onChange mas criou um loop infinito e quebrou tudo rs), se você inspecionar o editor do summer, você verá que o texto aparece dentro de uma div com a classe .note-editable e lá dentro ele insere os parágrafos, quebras de linha e etc. o que eu pensei que poderia ser feito é: dentro da função keyup, você pega o conteudo dessa div com classe note-editable e faz um loop e todos os <p> e verifica quantos caracteres tem em cada <p>, se tiver 42 caracteres, ele executa o método que adiciona um novo parágrafo. por exemplo:

var editor = $('#summernote').summernote();

e dentro da função onKeyup:

editor.summernote('insertParagraph');

um exemplo (incompleto ainda): https://jsfiddle.net/hfv35Ld0/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .