Skip the JavaScript line

Question

Skip the JavaScript line

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have this JavaScript function that only allows the user to type 42 characters. Can anyone help me, I need every time I get at 42 characters skip a line instead of blocking typing. My problem is in onKeydown and 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();
            }
        }
    }
});

javascript jquery

asked by anonymous 19.08.2016 / 20:14

2 answers

Limit the number of forms to be printed per page Full-Width Image Grid / Container with Semantic-UI

score 1 · Answer 1

Just make sure the .val() is divisible by how much you want to break the line (42 in your case), then enter a \n , using .val($(this).val()+"\n") as an example. You should remove breaks from previous lines, otherwise they will also be considered a character, so use .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>

In this case every 5 digits will insert a new line. There is BUGS in this, as the user can change the previously written text, this is not checked by the function but can add some solution to this.

score 1 · Answer 2

First, assign the instance of summernote to a variable, for later use, it already has a method to add paragraphs , using callbacks:{} you add the event onKeyup (I tried with onChange but created an infinite loop and broke all rs), if you inspect the summer editor, you will see that the text appears inside a div with class .note-editable and inside it inserts paragraphs, line breaks and so on. what I thought it could be done is: inside the keyup function, you get the contents of this div with class note-editable and loop and all <p> and check how many characters in each <p> , if you have 42 character, it performs the method that adds a new paragraph. for example:

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

and within the onKeyup function:

editor.summernote('insertParagraph');

An example (incomplete yet): link