Limit DIV element characters from the Easy editor plugin with Jquery

Question

Limit DIV element characters from the Easy editor plugin with Jquery

Navigation

#1 by (1 votes)

0

Hello everyone, I put them in context: I have a textarea to which I found myself in need of adding a plugin in Jquery because I had to add functions of a WYSIWYG editor. The functions were basic, such as: Bold, italics and lists (to say an example), and on the internet I found this plugin called: Easy editor link

I have my textarea like that, I just added the ID so that the jquery code works, leaving the HTML as follows:

<textarea   class="form-control"  id="infoadicional" name="infoadicional" placeholder="Escribe algunas líneas sobre ti." value="hola" rows="11" maxlength="2000" ><?php echo $variable ?></textarea>

As you can see, that HTML code already has the maxlength attribute, however it does not work, and with good reason, when reviewing the code, I notice that the plugin is adding another div being in the following way:

Following my basic knowledge, I use the following code to avoid that the DIV element allows writing more characters once the limit is reached. But unfortunately it does not work :(

$('.easyeditor').keyup(function() {
if ( $(this).val.length > 2000) {
    return false;
    }
});

Everything to get an editor like this:

Is anyone familiar with the subject able to help me please?

jquery html

asked by Neftali Acosta 17.04.2018 в 00:31

source

1 answer

Search form in Laravel Error between java - jdbc oralce, resultset null

score 1 · Accepted Answer

I'll give you two ways to do it, the first one is in case you strictly need this to be done with the "keyup" event. With this, the user can continue entering characters but if they are more than 20, only the first 20 will be left.

The second one, captures the event (e) "keydown" and if there are more than 20 characters and it is not the "backspace" (keyCode = 8), it will prevent the event from being launched from any other key that you press.

//primer método
$(document).on('keyup', '.easyeditor', function (e) {
    if ($(this).val().length > 19){
        $(this).val($(this).val().substr(0,20));
    }
});


//segundo método
$(document).on('keyup keydown', '.easyeditor2', function (e) {
    if ($(this).val().length > 19 && e.keyCode!=8){
        e.preventDefault();
        $(this).val($(this).val().substr(0,20));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="ta1" class="easyeditor" cols="30" rows="10"></textarea>
<textarea name="ta2" class="easyeditor2" cols="30" rows="10"></textarea>

I hope I have helped you.