＊文字入力数をチェックし、短すぎる文章は送信できないようにするサンプルです＊
Webサイトにはお問い合わせフォームを設置する必要があることが多いですが、普通にフォームを設置しただけでは、イタズラなどお問い合わせ以外のメッセージが送られてしまう可能性もあります。
入力必須項目を増やすなど、イタズラ・スパム対策は色々あるのですが、今回は一定の文字数以上入力しなければ送信できない機能のサンプルを作ってみました。
まず、textareaタグの情報をJavaScriptで取得し、文字列と文字数を得ます。ここでポイントとなるのは、一度文字列を得る必要があるという点です。
いきなり文字数を取得 →event.target.length…というふにできれば良いのですがそれはできません。
なのでまずは文字列（event.target.value）を取得した後、その長さ（.length）を取得する必要があります。
プログラム解説：event.target.value
今回のサンプルでは、20文字未満でエラーメッセージが表示されるようにしています。
Twitterでは逆に、140文字までしか投稿できないようにする…という活用がされていますね。
主な使用機能：HTML(textarea)・CSS・JavaScript
こちらにメッセージをご入力の上、
「確認する」ボタンをクリックして下さい。
20文字未満の入力だとエラー表示が出るように設定しています
現在の文字入力数：
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title></title>
<style>
.sample_textcounter_box {
width: 80%;
display: grid;
line-height: 1.5;
justify-content: center;
margin: 2rem auto;
font-family: sans-serif;
}
.sample_textcounter_box p {
width: fit-content;
margin: 0 auto;
margin-block-start: 0;
margin-block-end: 0;
}
.sample_textcounter_box textarea {
font-size: 16px;
display: block;
margin: 1rem auto;
width: 100%;
height: 100px;
box-shadow: 2px 2px grey;
}
.sample_textcounter_info {
white-space: pre;
}
.sample_textcounter_button {
width: fit-content;
margin: 1rem auto;
}
.message_confirmation {
padding: 4px;
border: dashed lavender;
}
</style>
</head>
<body>
<div class="sample_textcounter_box">
<p>こちらにメッセージをご入力の上、<br>「確認する」ボタンをクリックして下さい。<br><span style="font-size:.78rem; color:tomato;">20文字未満の入力だとエラー表示が出るように設定しています</span></p>
<textarea class="sample_textcounter_area" name="name"></textarea>
<p>現在の文字入力数：<span class="sample_textcounter_info"></span></p>
<button class="sample_textcounter_button" type="button" name="button">確認する</button>
</div>
<script type="text/javascript" defer>
{
const sample_textcounter_box = document.querySelector('.sample_textcounter_box');
const sample_textcounter_area = document.querySelector('.sample_textcounter_area');
const sample_textcounter_info = document.querySelector('.sample_textcounter_info');
const sample_textcounter_button = document.querySelector('.sample_textcounter_button');
let textCounter = 0;
sample_textcounter_info.style.color = 'red';
sample_textcounter_info.innerHTML =
`${textCounter}<br>文字数が足りません`;
sample_textcounter_area.addEventListener('input', () => {
let countValue = event.target.value;//テキストエリアのテキストを取得
textCounter = countValue.length;//テキストエリアのテキストの長さを代入
sample_textcounter_info.textContent = textCounter;
if (textCounter <= 20) {
sample_textcounter_info.style.color = 'red';
sample_textcounter_info.innerHTML =
`${textCounter}<br>文字数が足りません`;
}
else {
sample_textcounter_info.style.color = 'blue';
}
});
sample_textcounter_button.addEventListener('click', () => {
if (textCounter <= 20) {
alert('文字入力数が足りません。メッセージをご確認下さい。');
}
else {
const messageConfirmation = document.createElement('p');
messageConfirmation.textContent = 'ありがとうございます。メッセージ送信可能です。';
messageConfirmation.classList.add('message_confirmation');
sample_textcounter_box.appendChild(messageConfirmation);
}
});
}
</script>
</body>
</html>
