How can I not type more than 10 characters with WYSIWYG?

Question

How can I not type more than 10 characters with WYSIWYG?

Asked 7 years, 7 months ago

Viewed 179 times

1

Follows the code:

Html:

<textarea id="summernote">Escrever aqui</textarea>
<h5 id="limite_vermelho" style="text-align:right;color:red"></h5>
<h5 id="limite_normal" style="text-align:right"></h5>

JS:

$('#summernote').on('summernote.keyup', function(e) {
    debugger;
    var text = $(this).next('.note-editor').find('.note-editable').text();
    var length = text.length;
    var num = 10 - length;

    if (length > 10) {
        $('#limite_normal').hide();
        $('#limite_vermelho').text(10 - length).show();
    }
    else{
        $('#limite_vermelho').hide();
        $('#limite_normal').text(10 - length).show();
    }

});

Or if you prefer in jsfiddle: https://jsfiddle.net/dtgr5q29/112/

It cannot type more than 10 characters, how can I do this with jquery ?

I have to say that this does not make much sense in a WYSIWYG editor, because if the user, for example, set a text in bold, only the HTML tags occupied 7 characters (<b></b>). Are you sure this is the best solution to the problem?

– Woss

2017/04/04 at 23:16
@Andersoncarloswoss, even typing in bold, it does not count. Note on the line: var text = $(this).next('.note-editor').find('.note-editable').text();, there is way to stop typing the keyboard when it is bigger than 10 ?

– Matheus Miranda

2017/04/04 at 23:25
So, it would just replace the text by itself when the guy was typing, something like $(textarea).text(texto), with textarea pointing to the same place from where you are taking the variable text in your code. The problem is that WISIWYG must have an event keyup next to yours, then: either you use a simple field, or you will need to remove the WISIWYG event and re-experience it. I will try here, I don’t know...

– Daniel

2017/04/04 at 23:40
I looked at the documentation, I think just use the event onKeyUp http://summernote.org/deep-dive/#onkeyup-onkeydown

– Daniel

2017/04/04 at 23:45
@Daniel, I seem to have found the problem, please check: https://jsfiddle.net/dtgr5q29/117/

– Matheus Miranda

2017/04/04 at 23:57
Problem still not fixed, when typing 10 characters in bold, it loses. Looks @Andersoncarloswoss is right.

– Matheus Miranda

2017/04/05 at 00:02
1

There, working... whenever we use other people’s libraries, it’s good to look at their documentation. Some are very fucked.

– Daniel

2017/04/05 at 00:06

Show 2 more comments

1 answer

Browser other questions tagged javascript html5

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

by Daniel • **759** points · Answer 1 · 2017-04-05T00:01:54+00:00

The summernote has several callback functions in his documentation. Among them, the onKeyup. So, just include this callback when starting the object:

$('#summernote').summernote({
  callbacks: {
  onKeydown: function(e) {
   var textarea = $(this).next('.note-editor').find('.note-editable');
   var texto = $(textarea).text();

   if (texto.length > 10) {
     // apaga o texto que foi digitado
     $('#summernote').summernote('reset');
     // insere o texto dentro do limite desejado (no caso 10)
     $('#summernote').summernote('insertText', texto.substr(0, 10));
   }
  }
 }
});