"ワニ肉の味が気になっているWeb制作のMです。

今回はたまにお世話になってる入力内容の判定について書こうかなと朝きゅうりを食べた時に思いました。
きゅうりは味噌漬けて食べるのが一番好きかもしれません。


今回書く入力内容の判定は、HTML属性とjsを使います。


1.まず判定したいフォームに、用途に合わせて oninput onkeyup onchange　属性を追加します。

例
<input type=\text\"" id=\""text1\"">
↓
<input type=\""text\"" id=\""text1\"" oninput=\""\"">

※動くタイミングについて
　oninput・・・1文字でも入力・削除したら
　onkeyup・・・キーを押して、放したら
　onchange・・・フォーカスが外れたら


2.次にfunctionを定義します。名前は自分が分かれば大丈夫です。
　SpecialPlusStarUltraHyperBallCycloneTextCheck()とかでも大丈夫です。
　でもやめた方がいいです。

例

<script>
	function textcheck(){
	}
</script>

3.最後に
、定義したfunctionを属性値に追加します。

例

<input type=\""text\"" id=\""text1\"" oninput=\""textcheck()\"">

これで、inputで文字を入力・削除するとfunctionが動くようになります。

あとはお好きにfunctionの中に判定や処理を書いていくだけです。


その判定と処理を少し書きたいと思います。

○入力内容を判定したい場合


function textcheck(){

　var inputval = document.getElementById(\""text1\"").value;

　//もし入力内容に ニワトリ の文字が含まれていたら
　if(inputval.includes(\""ニワトリ\"")){
　　//やりたい処理を書いてください
　}

　//もし入力内容が ニワトリ だったら
　if(inputval == \""ニワトリ\""){
　　//やりたい処理を書いてください
　}
}


○入力した文字数のカウント・表示

function textcheck(){

　var inputval = document.getElementById(\""text1\"").value;

　//もし文字数が500文字以上だったら
　if(inputval.length > 499){
　　 //やりたい処理を書いてください
　}
　//文字数を表示
　document.getElementById(\""文字数を表示したい要素のID\"").textContent = inputval.length;
}


他にもボタンにdisable属性追加したり外したり、別の入力フォームの表示/非表示を切り替えたりと色んな判定・処理ができます。

以上、雑な感じになってしまい申し訳ないですが、今日のお夕飯にはタコが出ると思うのでお許しください。
"""