contenteditableとローカルストレージで簡易メモ帳を作る
前回書いた方法では保存ができません。
contenteditableでブラウザをメモ帳に - CarbonCopy’s diary
しかし、せっかくなら保存もできたら、便利かもと検索してみると
ブラウザのローカルストレージに保存できるようです。
試してみました。
ただ、私はHTMLもJavaScriptも良く分かっていません。
基本コピペです。あとは勘と検索任せです。便利な世の中ですね。
さて、私はこれを作って一体何に使うつもりなのか？
早速やってみよう。
参考サイトに記述のページを参考にやってみます。
因みに完成したのはこちら。
まず、HTMLから。
<button id="boldButton" onclick="bold()"><B>Bold</B></button>
<button id="underLineButton" onclick="underLine()"><U>UnderLine</U></button>
<button id="ialicBotton" onclick="italic()"><I>Italic</I></button>
<button type="button" name="savebtn" onclick="saveContent()">Save</button>
<button type="button" name="loadbtn" onclick="loadContent()">Load</button>
<div id="textarea" contenteditable="true" onclick="cleartextarea()">Type text here...</div>
最後の<div>のところでcontenteditableを使っています。この部分に入力されたテキストを書式付きで保存します。
残りはそれぞれ書式設定用のボタンと保存、読み込みのボタンです。
onclick="～"でクリックしたら、関数を呼び出すようです。
次に、JavaScript。
56docブログのスクリプトはほとんどそのまま使わせて頂き、MSDN Blogsのスクリプトを参考に次の関数を追加しました。
function bold(){//太字を設定する関数
document.execCommand("bold", false);
}
function underLine(){//下線を設定する関数
document.execCommand("underline", false);
}
function italic(){//斜体を設定する関数
document.execCommand("italic", false);
}
書式設定ボタンで呼び出す関数です。
保存、読み出しの関数はinnerTextをinnerHTMLに変えました。これで書式付きで保存できました。
最後に、CSS。
ちょっとボタンなどの見た目を変えます。
#textarea {
/* 背景色を灰色に指定 */
background-color: #F8F8F8;
/* フォントを指定 */
font-family: 'Open Sans', sans-serif;
/* 文字サイズを20pxに指定*/
font-size: 20px;
/* 外側の全ての余白を15pxに指定 */
margin: 15px;
/* 高さを200pxに指定*/
height: 200px;
}
button {
/* 文字サイズを1emに指定 */
font-size: 1em;
/* 縦方向に5px、
* 横方向に15pxの余白を指定 */
padding: 5px 15px;
/* 背景色を濃い緑色に指定 */
background-color: #1abc9c;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
}
button:hover {
/* 背景色を明るい緑色に指定 */
background-color: #31c8aa;
/* 文字色を白色に指定 */
color: #fff;
}
