これはおもしろいですね。
新しくタブを開いてロケーションバーに
1 |
data:text/html,<html contenteditable> |
と書くと、タブ全体がメモ帳のように文字を入力できるようになります。
ページを保存すればHTMLとして保存もできます。
何か一時的にメモっておくのにいちいちテキストエディタを立ち上げるのが面倒くさいときはいいかもしれませんね。
でもリロードすると消えるのでそこだけ注意ですね。
どうなってるの?
これはHTMLのcontenteditableというものを使ってますね。
DIVとかの通常編集できない要素を編集可能にするもので、実はTwitterのウェブサイトなんかでもツイートの入力欄で使われています。
使い方も簡単で、
1 |
<div contenteditable=true>この要素は編集できます</div> |
みたいにすると、このDIV要素はtextareaのように入力できるようになるんですね。
なんでtextareaじゃダメなの?
Twitterのツイート入力欄は文字数制限を超えると超えた文が赤くハイライトされます。
ですがフォームのtextareaじゃ途中から文字の色を変えたりはできません。
そこでこのようにDIVを編集可能にしておいて、JSとかで140文字をオーバーしたらそれ移行の文字をemタグで囲い、そこにCSSを記述しているようでした。
因みにこれをフォームで利用する場合はJavaScriptのinnerHTMLとかinnerTEXTで取得して送信すればいいみたいです。まだ試してませんが…。
おまけ
どうせなのでブックマークレットにしておきましょう。
どこか適当なページをブックマークしてからそのリンクの「編集」を開き、URLに上記コードをコピペ、サイト名にはなにかわかり易い名前(簡易メモとか)をつけてブックマークバーとかにおいておけばいつでもメモれますね。
コピペが面倒ならこのリンクをクリックすると新しいタブが開くのでそこをブックマークすればOKです。
コメントする