自動伸縮するテキストエリア
Page Not Found – 404のtextareaをcloneする方法は微妙なので、別の方法を考えた。全角文字や行を減らすのにも対応している。優れたUIは全てのサイトで使えるべき。GreasemonkeyだとDOMNodeInsertedをフックするのが面倒なのでXBLにした。
userContent.css:
textarea { overflow-y: hidden; min-height: 5em; height: 5em; -moz-binding: url("auto-resize.xml#run"); }
auto-resize.xml
<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" extends="chrome://global/content/platformHTMLBindings.xml#textAreas"> <binding id="run" extends="chrome://global/content/platformHTMLBindings.xml#textAreas"> <implementation><constructor><![CDATA[ this.style.height = "0px"; this.style.height = this.scrollHeight + "px"; ]]></constructor></implementation> <handlers> <handler event="input"><![CDATA[ this.style.height = "0px"; this.style.height = this.scrollHeight + "px"; ]]></handler> </handlers> </binding> </bindings>