素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

自動伸縮するテキストエリア

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>