Skip to content

Instantly share code, notes, and snippets.

@sainu
Last active January 24, 2018 17:41
Show Gist options
  • Save sainu/86394b5c76b506aead44e599551c6860 to your computer and use it in GitHub Desktop.
Save sainu/86394b5c76b506aead44e599551c6860 to your computer and use it in GitHub Desktop.
textareaを中身に応じて自動リサイズする ref: https://qiita.com/sainu__/items/4b3dab630688e6a3803f
/*
* How to use
*
* import ResizeTextarea from './path/to/ResizeTextarea';
* let textarea = document.querySelector('#textarea');
* const resizeTextarea = new ResizeTextarea(textarea);
* textarea.addEventListener('input', () => {
* resizeTextarea.resize();
* });
*/
export default class ResizeTextarea {
constructor(textarea) {
this.textarea = textarea;
this.style = window.getComputedStyle(textarea, null)
}
resize() {
if (this.scrollHeight > this.offsetHeight) {
this.height = this.scrollHeight;
} else {
while(true) {
this.height = this.height - this.lineHeight;
if (this.scrollHeight >= this.offsetHeight) {
this.height = this.scrollHeight;
break;
}
}
}
}
// get height of textarea from inline style attribute or css
// return Number
get height() {
let heightCss = this.textarea.style.height || this.style.getPropertyValue('height');
return Number(heightCss.slice(0, -2)) || 0;
}
// get line-height of textarea from inline style attribute or css
// return Number
get lineHeight() {
let lineHeightCss = this.textarea.style.lineHeight || this.style.getPropertyValue('line-height');
return Number(lineHeightCss.slice(0, -2)) || 0;
}
// return Number
get scrollHeight() {
return this.textarea.scrollHeight;
}
// return Number
get offsetHeight() {
return this.textarea.offsetHeight;
}
// param Number
set height(height) {
if (typeof(height) !== 'number') console.error('expect: ResizeTextarea get heightの引数は数値です。got: ', typeof(height));
this.textarea.style.height = height + 'px';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment