JavaScriptを使った文字数チェッカー-全角半角共1文字と数える

 文字数チェッカーがサイトにほしい。

 JavaScriptを使った文字数チェッカーってどう記述するんだっけ?

文字数チェッカー

 まずはものすごく簡単な文字数チェッカー。

 全角半角関係なく1文字として数える。

 ボックス内に文字を入力するか、文字を貼り付けて「Enter」キーを押す。

0文字

文字入力するエリアのHTML

 基本のコードは↓

<textarea cols="24" rows="3" onkeyup="ShowLength(value);"></textarea>
<p id="inputlength">0文字</p>

 これだけだと面白くないので、周りのふちの色を指定してみた。

<textarea onkeyup="ShowLength(value);" style=" border-top: #8080ff 24px ridge; border-bottom: #8080ff 24px ridge; border-left: #8080ff 24px ridge; border-right: #8080ff 24px ridge" wrap=off rows=13 cols=30></textarea>

入力された文字を数えるためのJavaScript

<script type="text/javascript"><!--
function ShowLength( str ) {
document.getElementById("inputlength").innerHTML = str.length + "文字";
}
// --></script>

ワードプレスに記述するときの注意

 WordPressの投稿画面にコードを記載するときは、「テキスト」で記述する。

 「ビジュアル」に切り替えるとテキストボックスが消えてしまう。

 サイドバーに記載するときは「テキストウィジェット」に記載する。

コメントを残す




*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

WordPressで使っていない画像を探して削除
広告や画像を横並べにするHTML
FC2ブログの記事をワードプレスにインポート
Googleアドセンスの非同期バージョンを入手する
ブログのタイトルのSEO対策検索結果の順位を上げよう
WordPressの無料テーマ3種をご紹介
ページタイトルの問題点と改善点を把握して訪問者を増やそう
Googleアドセンスの検索ボックスを編集したらコードが収得できなくなった場合の対処法
FTPクライアントソフト「WinSCP」インストールとサーバー接続設定
Googleカスタム検索のメリットとデメリットをWordPress標準検索と比べてみよう
WordPressテーマTwenty Fourteen(バージョン 3.9.1)で記事下に広告を表示
FTPソフトWinSCPでサーバーのWordPressファイルを保存してたので窮地を逃れられました
FC2ブログの記事をWordPressにインストールする前に検索エンジンの重複ページペナルティ対策
wordpressテーマSTINGER3のスマートフォン表示の【NEW ENTRY】のアイキャッチ画像を非表示にする
WordPressにFC2ブログの画像を取り込む

Menu

HOME

 TOP