この記事ではinput type="text"のフォームの入力文字の表示と入力文字数を判定する方法を紹介していきます。
入力文字数の判定
基本形
まずは「フォームの入力内容を表示する」というコードを作っていきましょう。
ここでは、onchangeで「入力欄の内容を変更した時」にイベントが発火するようにしています。
function checkValue() {
var ipt_form = document.getElementById('form');
var ipt_value = ipt_form.value;
document.getElementById('opt_value').innerHTML = ipt_value;
}<input type="text" id="form" onchange="checkValue()">
<div>入力内容：<span id="opt_value"></span></div>上記のコードを実装したデモがこちらです↓
入力した内容が表示されます。
文字数をチェックするif文を追加
上記のコードに文字数を判定する条件分岐を追加しましょう。
5文字未満のときに「5文字以上入力してください。」とエラーが表示され、入力内容が空になります。
function checkValue() {
var ipt_form = document.getElementById('form');
var ipt_value = ipt_form.value;
document.getElementById('opt_value').innerHTML = ipt_value;
if( ipt_value.length < 5 ) {
document.getElementById('less').style.display = 'block';
ipt_form.value = '';
} else {
document.getElementById('less').style.display = 'none';
}
}<input type="text" id="form" onchange="checkValue()">
<div>入力内容：<span id="opt_value"></span></div>
<p id="less">5文字以上入力してください。</p>#less {
display: none;
}上記を実装したデモがこちらです↓
このコードでは、エラー文はdisplayのblock/noneで表示・非表示を切り替えています。
