Last active
January 24, 2018 17:41
-
-
Save sainu/86394b5c76b506aead44e599551c6860 to your computer and use it in GitHub Desktop.
textareaを中身に応じて自動リサイズする ref: https://qiita.com/sainu__/items/4b3dab630688e6a3803f
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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