SmartPad4i（Cobos4i）では、Designerの設定で定義した文字型や長さで自動的に入力チェックが作成されるようになっています。自動で追加されるチェック以外で、HTMLとJavaScriptを使用することで独自の制限を追加することも可能です。
今回のTipsでは、独自の入力制限を追加する手順についてご紹介します。
入力欄の制限追加
SmartPad4i(Cobos4i)のチェック機能は入力欄からフォーカス移動時(blur)に発生します。
Tipsで追加する入力制限では、入力欄でキー入力された際(keydown)とフォーカス移動時(blur)の両方でチェックをします。
入力制限を追加する例として、「全角ひらがな」のみを許可する入力欄と「全角カタカナ」のみを許可する入力欄を作成します。
なお、Tipsではスクリプトを簡略化するためにjQueryのライブラリを使用しています。
HTMLの編集
jQueryが読み込み完了する際に、カスタムデータ属性が設定されている入力欄に入力制限を追加しますので、HTML側には入力を制限する入力欄(input要素)にカスタムデータ属性を設定しておきます。
例) 全角ひらがなのみを入力するinput要素にdata-inputfilter=”zenhira”を追加
<input id="INP01" data-inputfilter="zenhira" class="input" type="text" placeholder="ひらがな入力">例)全角カタカナのみを入力するinput要素にdata-inputfilter=”zenkana”を追加
<input id="INP03" data-inputfilter="zenkana" class="input" type="text" placeholder="カタカナ入力">外部スクリプトの読み込み
body終了タグの前に外部スクリプトの読み込みを追加します。
jQueryとTipsで作成するinputFilter.jsを読み込みます。
※パスは配置する場所に合わせて変更ください。
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="../smartpad4i/html/TIPS2506/inputFilter.js" ></script>
</body> inputFilter.js の編集
外部読み込みに設定したinputFilter.jsはjQueryの読み込み完了時に実行しますので、以下記述を追加します。
$(function(){
//起動時に実行する処理を追加する
});全角ひらがな
全角ひらがなと全角スペース、ー のみに入力を制限する場合の例は以下になります。
\u30A0-\u30FFが全角ひらがなで、\u3000が全角スペースになります。
HTMLの編集時に追加したカスタムデータ属性の名前の要素に処理を追加します。
※コードはinputFilter.jsの //起動時に実行する処理を追加する の箇所に記述
$('input[data-inputfilter="zenkana"]').on("keydown blur",function(e){
if(e.keyCode == '229') return true;
var pattern = /([^\u30A0-\u30FF\u3000]|^ー)/g;
$(this).val($(this).val().replace(pattern,''));
});全角カタカナ
全角カタカナと全角スペース、ー のみに入力を制限する場合の例は以下になります。
\u3040-\u309Fが全角カタカナになります。
※コードはinputFilter.jsの //起動時に実行する処理を追加する の箇所に記述
$('input[data-inputfilter="zenhira"]').on("keydown blur",function(e){
if(e.keyCode == '229') return true;
var pattern = /([^\u3040-\u309F\u3000]|^ー)/g;
$(this).val($(this).val().replace(pattern,''));
});上記のように、カスタムデータ属性名を独自に定義して、正規表現を設定することで独自の入力制限を作成することが可能ですので、Tipsの例を参考に様々な入力制限を作成ください。