▶ 実 行
▶ 実行
クリア
文字数カウンター
by 雪乃☆雫
#---チェックボックスのフラグ--------- チェックは「1,-1,-1」を「,」で区切る。 # オフはオフ(0)ではなく「-1」にする。 #---HTML設定--------- HTML=「 <div id="edit"></div> <fieldset ID="option"> <legend>カウントから除外</legend> <input type="checkbox" checked="checked" id="check_0">改行 <input type="checkbox" id="check_1">半角スペース <input type="checkbox" id="check_2">全角スペース </fieldset> 」 DOM親要素にHTMLを、DOM_HTML設定。 DOM親要素の「行揃え」に「左」をDOMスタイル設定。 #---UI作成---------- 「#edit」にDOM親要素設定。 0のエディタ作成して、文字数エディタに代入。 「文字」のラベル作成。 改行作成。 空のテキストエリア作成して、入力エリアに代入。 改行作成。 「一時保存」のボタン作成して、保存ボタンに代入。 「読込」のボタン作成して、読込ボタンに代入。 「クリア」のボタン作成して、クリアボタンに代入。 改行作成。 #---スタイル設定---------- 文字数エディタの「マージン」に「2px 5px」をDOMスタイル設定。 保存ボタンの「マージン」に「5px」をDOMスタイル設定。 読込ボタンの「マージン」に「5px」をDOMスタイル設定。 クリアボタンの「マージン」に「5px」をDOMスタイル設定。 入力エリアの「rows」に「20」をDOM属性設定。 入力エリアの「placeholder」に「ここに文章を入力」をDOM属性設定。 入力エリアに{ 幅: "99%", 高さ:"300px", マージン: "2px 5px", "font-size": "1.1em", "line-height": "1.3em", }をDOMスタイル一括設定。 「#option」に{ 幅: "320px", "font-family": "sans-serif", 文字サイズ: "small", 余白: "5px", マージン: "5px", ボーダー: "groove 2px white", }をDOMスタイル一括設定。 #---チェックボックスのイベント---------- (チェックの要素数)回 C=回数-1。 「●チェック関数{C}{改行} 。{C}をチェック時。{改行}ここまで。」をナデシコする。 「#check_{C}」の「onchange」に「チェック関数{C}」をDOMイベント設定。 ここまで。 #---イベント設定---------- 入力エリアの「oninput」に「カウント」をDOMイベント設定。 クリアボタンをクリックした時には、 「入力内容は全てクリアされます。」で二択。 もし、それがはいならば、 入力エリアに空をテキスト設定。 文字数エディタに0をテキスト設定。 ここまで。 ここまで。 読込ボタンをクリックした時には、 「ローカルストレージから保存内容を読み込みます。 現在の入力内容は破棄されます。」で二択。 もし、それがはいならば、 Sは「文字数カウントエディタ入力内容」をローカルストレージ読む。 入力エリアにSをテキスト設定。カウント。 ここまで。 ここまで。 保存ボタンをクリックした時には 「新規に保存しますか? 現在保存されている内容はクリアされます。」で二択。 もし、それがはいならば、 Sは入力エリアのテキスト取得。 Sを「文字数カウントエディタ入力内容」にローカルストレージ保存。 ここまで。 ここまで。 #---関数---------- ●カウント Sは入力エリアのテキスト取得。 もし、チェック[0]=オンならば、 SはSのCRを空に置換。SはSのLFを空に置換。 ここまで。 もし、チェック[1]=オンならば、SはSの「 」を空に置換。 もし、チェック[2]=オンならば、SはSの「 」を空に置換。 文字数エディタにSの文字数をテキスト設定。 ここまで。 ●チェック時(Cを) チェック[C]=チェック[C]*-1。 カウント。 ここまで。