こんにちは、kazuです。
本日は文字列カウンターを作ってみましたので、
それを記事にしていきます。
なぜこのプログラムを作ったか
今回このプログラムを作ったきっかけは私事ですがプロフィール書く機会が多くなりまして
プロフィール作る時って文字数決まってますよね？
その文字数をすぎないようにするため今回このプログラムを作りました。
ちなみにですが、今回画像は作りませんが、
実際に文字列カウンターのプログラムを次の章で実装しましたので、
ぜひ触ってみてください。
実際に触ってみよう
以下のテキストエリアに文字列を入力してみてください入力文字が変わります。
ただしすみませんコピペ対応していませんでした。
コード追記していきますので、お待ちください！
実際使ってみましたがコピペ対応していました。
コード修正しました修正場所は150文字以上になっても数字をカウントするままにして赤字にしました。
0文字
コードを見てみよう
<body>
<!-- textareaタグは文字列を入力するために使っています。inputタグでも可能です。-->
<!-- onkeyupとは要素上で押されていたキーから指から離れた時に発生するイベントです。つまり文字を入力したらonkeyupによりtextCheack(JavaScript)を呼び出します。-->
<textarea type="text" onkeyup="textCheack(this);" rows="10" cols="100" ></textarea>
<p>
<!-- ここが更新されて文字数を表示します -->
<span id="counter_text">0</span>
<span id="support_text">文字</span>
<!-- 初期は文字を表示しませんが150文字以上になったときに表示されます -->
<span id="alert_text"></span>
</p>
</body>function textCheack(num){
// num.value.lengthが文字数ですちなみにですがnum.valueが文字です
var count = num.value.length
// spanの要素をidから取得しています
var CounterText = document.getElementById('counter_text');
var SupportText = document.getElementById('support_text')
実際にHTMLに上書きしています
CounterText.innerHTML = count
SupportText.innerHTML = "文字"
// 文字数が150文字以上になったときにif文が実行されます
if (count > 150){
CounterText.innerHTML = ""
SupportText.innerHTML = ""
CounterText.innerHTML = "150字以上になりました"
}
}// 修正バージョン 2021/10/17 追記
function textCheack(object){
var count = object.value.length
var CounterText = document.getElementById('counter_text');
var SupportText = document.getElementById('support_text')
CounterText.innerHTML = count
SupportText.innerHTML = "文字"
// 追加
CounterText.style.color = "#000000"
if (count > 150){
CounterText.innerHTML = ""
SupportText.innerHTML = ""
// 追加
CounterText.innerHTML = `${count}文字 : 150文字以上になりました`
CounterText.style.color = "#FF0000"
}
}
最後に
いかがでしたでしょうか？
今回は完全に自分都合のプログラムでしたが、
せっかくですので使ってみてください。
最後までご覧いただきありがとうございました。
関連記事
こんにちはkazuです。 本日はjavascriptで2022年までのカウントダウンタイマーを作ってみましたので、 そのコードを解説していきます。 アプリの説明 まずは、アプリの説明をしていきます。 といってもたいして説明する[…]
関連記事
こんにちはkazuです。 本日はjavascriptでアラームとタイムセールを知らせるプログラムを作ってみたので、 そのコードを解説していきます。 はじめに 今回はどのようなプログラムを作ったかといいますと、 特定の時間を変数に入[…]