textarea要素を通常のテキストのように見せる方法

Question

ユーザーがページに表示されているとおりに項目を編集し、標準のキーとワードプロセッシングアプリケーションのイディオムを使用して項目を編集できるHTMLリストを作成しようとしています。何か少し好きですhttp://www.workflowy.com

私は、各リスト項目にテキストエリアを与えることでこれを実装しました。最初はテキストエディタのスタイルでは表示されませんが、リストアイテムクラスが "editor"に設定されている場合はテキストエリアが表示され、リストテキストは表示されません。例：http://jsfiddle.net/WWkWc/13/

この例に行くと、リスト項目をクリックすると、予想通りに見えます（この例では、矢印キーではなく項目をクリックすることでしか移動できません） 。その唯一の本当の問題は、テキストボックスがテキスト行よりも背が高いことで、テキストボックスが表示されているときにリスト項目が大きくなることです。私はこの効果を取り除く方法を理解できません。あなただけのことをしhttp://aloha-editor.org/かhttp://jejacks0n.github.com/mercury/をチェックアウト車輪の再発明をしたくない場合は

乾杯

Answer 1

代わりにcontenteditableを使用できますか？

http://jsfiddle.net/WWkWc/16/

<li contenteditable> 
    <h2>Item text</h2> 
</li> 

もっと例：

http://html5demos.com/contenteditable

編集可能なコンテンツを使用したくない場合は、トリックを持っているh2要素とtextarea要素を取得することです全く同じ性質。この場合、私はそれらに同じ、フォントサイズ、フォントファミリ、および高さを与えます。 h2はブロックレベルの要素なので、テキストエリアもblockに設定しました。最後に、スクロールアローを防ぐためにオーバーフロー：隠しを設定しました。私はまたあなたのJavaScriptを少し簡略化しました。

http://jsfiddle.net/HM5V5/1/

h2, ul li textarea { 
    font-size: 16px; 
    font-family: arial; 
    height: 19px; 
} 

ul li textarea { 
    display: none; 
    /*border: 1px solid gray;*/ 
    outline: 1; 
    border: 0; 
    resize:none; 
    overflow: hidden; 
} 

ul li.editor textarea { 
    display: block; 
} 
ul li.editor h2{ 
    display:none; 
} 

Answer 2

を。どちらもHTML5エディタです。