Javascript - Как вручную уменьшить высоту textarea в Chrome, когда высота установлена ​​в коде?

Question

У меня есть текстовое поле в форме, которую пользователи часто используют. Когда пользователь вручную настраивает размер текстового поля, используя элемент изменения размера в нижнем правом углу текстового поля, я сохраняю высоту в localStorage. Я хочу установить высоту textarea на высоту, сохраненную в localStorage, но когда я делаю, текстовое пространство не может быть изменено меньше, чем высота, которая была установлена.

Он отлично работает в Firefox, но не в Chrome.

В настоящее время я устанавливаю высоту, используя jQuery .height(). Я также пробовал .outerHeight(), .css(), .style, .setProperty(). Никто не работал.

код Я работаю с:

id = params.id ? params.id : $el.attr('id'); 
    lsHeight = localStorage.getItem('textareaOuterHeight-' + id); 

    if (lsHeight != null) { 
     $el.height(lsHeight); 
    } 

    $el.data('defaultOuterHeight', $el.outerHeight()); 

    $el.on('click', function() { 
     if ($el.data('defaultOuterHeight') !== $el.outerHeight()) { 
     localStorage.setItem('textareaOuterHeight-' + id, $el.outerHeight()); 
     } 
    }); 

Answer 1

кажется, правильно работает для меня:

$('textarea').height(20);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<textarea name="" id="" cols="50" rows="50"></textarea>

Вместо сохранения + изменения высоты текстового поля с значение CSS по высоте, вы можете попытаться изменить количество столбцов или строк:

$('textarea').attr('rows',60); 

Answer 2

Это ошибка Chrome, который по-прежнему открыт https://bugs.chromium.org/p/chromium/issues/detail?id=94583

Вы можете использовать обходной путь здесь jsfiddle.net/nz8ut/2/

И вы можете взглянуть на этот вопрос Custom CSS to allow chrome textarea resize smaller than initial state?