MooTools-入力フィルタリング

MooToolsはユーザー入力をフィルタリングでき、入力のタイプを簡単に認識できます。基本的な入力タイプは、数値と文字列です。

数字関数

入力値が数値であるかどうかをチェックするいくつかのメソッドについて説明しましょう。これらのメソッドは、数値入力の操作にも役立ちます。

toInt（）

このメソッドは、入力値を整数に変換します。変数で呼び出すことができ、変数に含まれるすべてのものから通常の整数を与えようとします。

テキストボックスと TO INT という名前のボタンを含むWebページを設計する例を見てみましょう。このボタンは、テキストボックスに入力した値を実際の整数としてチェックして返します。値が整数でない場合、 NaN シンボルを返します。次のコードを見てください。

例

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var toIntDemo = function(){
            var input = $('input').get('value');
            var number = input.toInt();
            alert ('Value is : ' + number);
         }

         window.addEvent('domready', function() {
            $('toint').addEvent('click', toIntDemo);
         });
      </script>
   </head>

   <body>
      Enter some value: <input type = "text" id = "input"/>
      <input type = "button" id = "toint" value = "TO INT"/>
   </body>

</html>

次の出力が表示されます-

出力

異なる値を試して、それらを実際の整数に変換します。

typeOf（）

このメソッドは、渡した変数の値を調べ、その値の型を返します。

Webページを設計し、入力値がNumber、String、またはBooleanかどうかを確認する例を見てみましょう。次のコードを見てください。

例

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var checkType = function(){
            var input = $('input').get('value');
            var int_input = input.toInt();

            if(typeOf(int_input) != 'number'){
               if(input == 'false' || input == 'true'){
                  alert("Variable type is : Boolean"+" - and value is: "+input);
               } else{
                  alert("Variable type is : "+typeof(input)+" - and value is: "+input);
               }
            } else{
               alert("Variable type is : "+typeof(int_input)+"
                  - and value is:"+int_input);
            }
         }

         window.addEvent('domready', function() {
            $('checktype').addEvent('click', checkType);
         });
      </script>
   </head>

   <body>
      Enter some value: <input type = "text" id = "input"/>
      <input type = "button" id = "checktype" value = "CHECK TYPE"/>
   </body>

</html>

次の出力が表示されます-

出力

異なる値を試して、タイプを確認してください。

限定（）

limit（）メソッドは、特定の数値の下限値と上限値を設定するために使用されます。この数は上限値を超えてはなりません。超えている場合、数値は上限値に変更されます。このプロセスは下限でも同じです。

値を入力するためのテキストボックスを提供し、その値の制限を確認するボタンを提供する例を見てみましょう。この例で使用したデフォルトの制限は0〜255です。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var checkLimit = function(){
            var input = $('input').get('value');
            var number = input.toInt();
            var limited_number = number.limit(0, 255);
            alert("Number is : " + limited_number);
         }

         window.addEvent('domready', function() {
            $('check_limit').addEvent('click', checkLimit);
         });
      </script>
   </head>

   <body>
      Enter some value: <input type = "text" id = "input"/>
      <input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
   </body>

</html>

次の出力が表示されます-

出力

別の番号を試して制限を確認してください。

rgbToHex（）

rgbToHex（）メソッドは、赤、緑、青の値を16進値に変換します。この関数は数値を処理し、Arrayコレクションに属します。赤、緑、青の個々の値を入力するWebページを設計する例を見てみましょう。 3つすべてを16進値に変換するボタンを提供します。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var rgbToHexa_Demo = function(){
            var red = $('red').get('value');
            var red_value = red.toInt();
            var green = $('green').get('value');
            var green_value = green.toInt();
            var blue = $('blue').get('value');
            var blue_value = blue.toInt();
            var color = [red_value, green_value, blue_value].rgbToHex();
            alert(" Hexa color is : " + color);
         }

         window.addEvent('domready', function() {
            $('rgbtohex').addEvent('click', rgbToHexa_Demo);
         });
      </script>
   </head>

   <body>
      Red Value: <input type = "text" id = "red"/><br/><br/>
      Green Value: <input type = "text" id = "green"/><br/><br/>
      Blue Value: <input type = "text" id = "blue"/><br/><br/>
      <input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
   </body>

</html>

次の出力が表示されます-

出力

異なる赤、緑、青の値を試して、16進値を見つけます。

文字列関数

入力文字列値を操作できるStringクラスのいくつかのメソッドについて説明します。先に進む前に、文字列関数を呼び出す方法の次の構文を見てみましょう。

ひも

var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();

Or,

var result_of_function = "Heres some text".someStringFunction();

トリム（）

このメソッドは、指定された文字列のフロントポジションとエンドポジションの空白を削除するために使用されます。文字列内の空白には触れません。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var input_str = " This is finddevguides.com ";
            document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");

            var trim_string = input_str.trim();
            document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>

   <body>
   </body>

</html>

次の出力が表示されます-

出力

上記のアラートボックスでは、trim（）メソッドを呼び出す前と、trim（）メソッドを呼び出した後のStringの違いを見つけることができます。

クリーン（）

このメソッドは、指定された文字列からすべての空白を削除し、単語間の単一のスペースを維持するために使用されます。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var input_str = " This is finddevguides.com ";
            document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");

            var trim_string = input_str.clean();
            document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
         });
      </script>
   </head>

   <body>
   </body>

</html>

次の出力が表示されます-

出力

contains（）

このメソッドは、指定されたストリング内のサブストリングを検索するために使用されます。指定された文字列に検索文字列が含まれる場合はtrueを返し、含まれない場合はfalseを返します。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var containsString = function(){
            var input_string = "Hai this is finddevguides";
            var search_string = $('input').get('value');
            var string_contains = input_string.contains(search_string);
            alert("contains : " + string_contains);
         }

         window.addEvent('domready', function() {
            $('contains').addEvent('click', containsString);
         });
      </script>
   </head>

   <body>
      Given String : <p>Hai this is finddevguides</p>
      Enter search string: <input type = "text" id = "input"/>
      <input type = "button" id = "contains" value = "Search String"/>
   </body>

</html>

次の出力が表示されます-

出力

代替（）

このメソッドは、入力文字列をメイン文字列に挿入するために使用されます。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         var containsString = function(){
            var input_string = "One is {one}, Two is {two}, Three is {three}";
            var one_str = $('one').get('value');
            var two_str = $('two').get('value');
            var three_str = $('three').get('value');

            var substitution_string = {
               one : one_str,
               two : two_str,
               three : three_str
            }
            var new_string = input_string.substitute(substitution_string);
            document.write("NEW STRING IS : " + new_string);
         }

         window.addEvent('domready', function() {
            $('contains').addEvent('click', containsString);
         });
      </script>
   </head>

   <body>
      Given String : <p>One is {one}, Two {two}, Three is {three}</p>
      one String : <input type = "text" id = "one"/><br/><br/>
      two String : <input type = "text" id = "two"/><br/><br/>
      three String : <input type = "text" id = "three"/><br/><br/>
      <input type = "button" id = "contains" value = "Substitute String"/>
   </body>

</html>

次の出力が表示されます-

出力

3つのテキストボックスにテキストを入力し、[置換文字列]ボタンをクリックすると、置換文字列が表示されます。

Mootools-input-filtering

MooTools-入力フィルタリング

数字関数

toInt（）

typeOf（）

限定（）

rgbToHex（）

文字列関数

ひも

トリム（）

クリーン（）

contains（）

代替（）

目次