4.1.2 Limiter

Ajaxフレームワーク UI部品リファレンス

目次索引

4.1.2 Limiter

Limiterは、入力文字を制限する機能付加部品です。よく使われる可能性のある検証ルールをあらかじめ実装したものとして、NumeralOnlyLimiter、EnableCharTypeLimiterがあります。
本部品は、ユーザが独自の検証ルールを作成する場合に使用します。

記述形式
プロパティ
イベントリスナ
JavaScript API

なお、Limiterは、対象となる部品へのキー入力および文字列のペーストに対する制限を行う機能部品です。これら以外の方法による部品への値設定(初期値設定、APIによる更新、モデルとのバインディング)については、Limiterでは制限しません。

機能付加対象は以下のとおりです。

Limiterを利用できるブラウザ
Limiterは、Internet Explorerでだけ利用可能な部品です。ほかのブラウザでは、動作しません。また、Limiterは、1つの部品につき1つだけ設定できます。
Limiterを追加すると、入力フィールドに以下の制約が追加されます。

IMEを使った入力はできません。(IMEは常に無効です。)
上書き入力はできません。常に挿入による入力になります。

■記述形式

<div rcf:type="Limiter" rcf:target="xxx"></div>

または

<span rcf:type="Limiter" rcf:target="xxx"></span>

子要素は記述できません。
本部品は画面に表示されないため、<div>タグおよび<span>タグのどちらで記述しても違いはありません。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
target	String	機能付加対象のrcf:idを指定します。	不可	－	値	不可	不可
limiter	doLimit関数およびdoLimitOnPaste関数を持つオブジェクト	キー入力制限を行う関数 (注)	可	キー入力を制限しないで、ペーストを禁止する関数	値	不可	不可

そのほかにも、画面部品および機能付加部品で共通のプロパティを指定することができます。詳細は、“画面部品共通プロパティ”、および“機能付加部品共通プロパティ”を参照してください。

注) limiterプロパティ
limiterプロパティは、キーが入力されたときのキー入力の制限を行うdoLimit関数、およびペーストされたときの制限を行うdoLimitOnPaste関数を持つオブジェクトを指定します。オブジェクトには、doLimit、doLimitOnPaste関数のどちらか、または両方を持つことができます。例えば、doLimitだけを持つオブジェクトを指定した場合、ペーストされたときの制限はデフォルト動作になります。

doLimit関数
doLimit関数のシグネチャは以下のとおりです。
boolean doLimit(limitObj)

引数のlimitObjには、以下の連想配列が渡されます。

{
  charCode: キーコード
  cursor: カーソル位置
  value: 現在の文字列
}

名前	データ型	説明
charCode	Number	入力されようとしているキーのキーコード
cursor	Number	カーソル位置
value	String	現在の文字列ただし、文字列の一部分が選択状態の場合は、選択状態部分を除いた文字列が渡されます。

doLimit関数は、引数により、入力されようとしているキーを許可するかどうかを判断し、許可する場合はtrue、許可しない場合はfalseを返すように実装します。

doLimit関数の中では、入力部品からフォーカスが外れるような処理や副作用を及ぼすような処理は行わないでください。それらの処理を行った場合、正常に入力できなくなります。

doLimitOnPaste関数
doLimitOnPaste関数のシグネチャは以下のとおりです。
String doLimitOnPaste (obj)

引数objには、以下の連想配列が渡されます。

{
  pasteString: ペーストされようとしている文字列
  cursor: カーソル位置
  value: 現在の文字列
}

名前	データ型	説明
pasteString	String	ペーストされようとしている文字列
cursor	Number	カーソル位置
value	String	現在の文字列ただし、文字列の一部分が選択状態の場合は、選択状態部分を除いた文字列が渡されます。

doLimitOnPasteでは、引数により、ペーストされようとしている文字列を許可するかどうかを判断し、許可する文字列を返すように実装します。許可しない場合は、""(空文字列)を返します。

doLimitOnPaste関数の中では、入力部品からフォーカスが外れるような処理や副作用を及ぼすような処理は行わないでください。それらの処理を行った場合、正常に入力できなくなります。

doLimitおよびdoLimitOnPasteの例を以下に示します。

入力可能な文字列を、英字(+アンダースコア)で始まる英数字(+アンダースコア)に限定する例

<script type="text/javascript">
//<![CDATA[
    var limit1 = {
        doLimit: function(limitObj) {
            // 返却値
            var acceptable = false;
            
            // 英字およびアンダースコア (すべての位置)
            if ((limitObj.charCode >= 65 && limitObj.charCode <= 90) ||
                (limitObj.charCode >= 97 && limitObj.charCode <= 122) ||
                limitObj.charCode == 95) {
                acceptable = true;
            }
            // 数字 (2文字目以降)
            else if (limitObj.charCode >= 48 && limitObj.charCode <= 57) {
                if (limitObj.cursor > 0) {
                    acceptable = true;
                }
            }
            
            return acceptable;
        },

        doLimitOnPaste: function(obj) {
            // 返却文字列
            var result = "";
            
            // 文字の追加位置が先頭か否かを判定するフラグ
            var firstChar = (obj.cursor == 0) ? true : false;
            
            // ペーストする文字列を先頭から順にチェック
            for (var i = 0; i < obj.pasteString.length; i++) {
                var code = obj.pasteString.charCodeAt(i);
                var acceptable = false;
            
                // 英字およびアンダースコア (すべての位置)
                if ((code >= 65 && code <= 90) ||
                    (code >= 97 && code <= 122) ||
                    code == 95) {
                    acceptable = true;
                }
                // 数字 (2文字目以降)
                else if (code >= 48 && code <= 57) {
                    if (!firstChar) {
                        acceptable = true;
                    }
                }

                // 入力可能な文字ならば、返却する文字列に追加
                if (acceptable) {
                    result += obj.pasteString.charAt(i);
                    firstChar = false;
                }
            }
            
            return result;
        }
    }
//]]>
</script>

  ...

<div rcf:id="textInput1" rcf:type="TextInput"></div>
<div rcf:id="limiter" rcf:type="Limiter"
    rcf:target="textInput1" rcf:limiter="limit1"></div>

■イベントリスナ

固有のイベントリスナはありません。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

目次索引