MooTools-入力フィルタリング

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

数値関数

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

toInt（）

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

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

Example

<!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>

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

Output

さまざまな値を試して、それらを実数の整数に変換してください。

typeOf（）

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

Webページをデザインし、入力値が数値、文字列、ブール値のいずれであるかを確認する例を見てみましょう。次のコードを見てください。

Example

<!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>

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

Output

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

limit（）

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

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

Example

<!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>

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

Output

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

rgbToHex（）

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

Example

<!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>

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

Output

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

文字列関数

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

ストリング

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

または、

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

トリム（）

このメソッドは、特定の文字列の前の位置と終わりの位置の空白を削除するために使用されます。文字列内の空白には触れません。次のコードを見てください。

Example

<!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 tutorialspoint.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>

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

Output

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

掃除（）

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

Example

<!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 tutorialspoint.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>

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

Output

contains（）

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

Example

<!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 tutorialspoint";
            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 tutorialspoint</p>
      Enter search string: <input type = "text" id = "input" />
      <input type = "button" id = "contains" value = "Search String"/>
   </body>
   
</html>

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

Output

代替（）

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

Example

<!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>

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

Output

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

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved