「テキスト入力欄の文字数をリアルタイム表示させる機能」の実装方法を紹介します。
実装したいこと
[kanren id=”1145″]
このページにあるリアルタイムに文字数をカウントする機能を実装します。
ソースは以下の通り
<form class=”sampleform”>
<textarea cols=”24″ rows=”3″ onkeyup=”ShowLength(‘inputlength1’, value);”></textarea>
<img src=”https://100year.jp/wp-content/uploads/2018/09/20972.png” alt=”” width=”40″ height=”40″ class=”alignnone size-full wp-image-1185″ />
<p id=”inputlength1″>0文字</p>
</form>
<style type=”text/css”>
form.sampleform p { margin: 1px 0px 0.5em 0px; padding: 0px; text-align: right; color: #000; font-size: 300%; text-align: center;}
</style>
<script type=”text/javascript”><!–
function ShowLength( idn, str ) {
document.getElementById(idn).innerHTML = str.length + “文字”;
}
// –></script>
これをそのまま投稿ページに貼れば、リアルタイムで文字数をカウントする機能が実装できると思います。
※注意：WordPress投稿画面で「ビジュアル」にしてしまうと、script部分が消えてしまいます。コピペする際は「テキスト」編集の方でソースをコピペしましょう。
簡単です。
まずはコピペで実装。
興味のある方は原理を学びましょう。（WEBで検索・・・）
関連記事
[kanren id=”1145″]
