Hey. I have a div contenteditable with styles:

min-height:85px; height:auto

Which means that this element with a content greater than 85px will increase in height. And since the content is absolutely dynamic and is formed in the process of working with the element, it is necessary to track the moment of increase of this div contenteditable. I tried the method: onresize - the event does not work. Next, I tried onkeyup to track enter. But in this case, I track the increase too late - after the text field has increased. If you use onkeydown, then you need to determine whether it will increase the text field after pressing enter? Therefore, the idea came to view the height of the content, but due to min-height, any height in js is given as 85px, and not in fact occupied space.

    1 answer 1

    And this option is suitable?

     class TextFieldValidator { static isResizeXValid( prevRectangle, currentRectangle ){ return prevRectangle.width !== currentRectangle.width; } static isResizeYValid( prevRectangle, currentRectangle ){ return prevRectangle.height !== currentRectangle.height; } static isResizeValid( prevRectangle, currentRectangle ){ return TextFieldValidator.isResizeXValid( prevRectangle, currentRectangle ) || TextFieldValidator.isResizeYValid( prevRectangle, currentRectangle ); } } class TextField { constructor( element ){ this.element = element; this.inputHander = event => this.element_inputHandler( event ); this.element.addEventListener( 'input', this.inputHander ); this.rectangle = { width: NaN, height: NaN, top: NaN, left: NaN }; this.setRectangle( this.element.getBoundingClientRect() ); } element_inputHandler( { target } ){ let rectangle = target.getBoundingClientRect(); if( TextFieldValidator.isResizeValid( this.rectangle, rectangle ) ){ // если мы тут, то произошел ресайз console.log( 'resize' ); } this.setRectangle( rectangle ); } setRectangle( { width, height, top, left } ){ this.rectangle.width = width; this.rectangle.height = height; this.rectangle.top = top; this.rectangle.left = left; } } let textField = new TextField( document.body.querySelector('#textfield') ); 
     <div id="textfield" contenteditable="true">some text</div>

    • Thanks, Such an option will not work, because I use the already ready with a bunch of contenteditable frills. And if you make it from scratch, there will be a lot of problems, you need such a solution that can be attached to any code - iproger
    • It turns out that you deliberately asked the garbage to just listen to the options that you would not suit in any case, since you use something custom? Are you having so much fun? - user220409
    • No, I ask the options how to get out of the situation. Do you understand that in order for such a div to work, you need about 200 lines of code? and if you start to develop something of your own - it will be delayed. You suggested just ready-made code, but I was waiting for a tool or idea to prompt me, and in this code, for me, much is not clear. Suppose I came up with so that when I click on a symbol, I’ll copy all the contents into a regular invisible div and check its height, there is no min-height, so you can easily find out the exact height already. I would like to hear something better than such a solution, rather than rewriting ready-made ve - iproger