MooTools可以过滤用户输入,并且可以轻松识别输入类型.基本输入类型是数字和字符串.
让我们讨论一些方法来检查输入值是否为数字或不.这些方法还可以帮助您操作数字输入.
此方法将任何输入值转换为整数.你可以在变量上调用它,它会尝试从变量包含的内容中给出常规整数.
让我们举个例子来设计一个包含文本框和按钮的网页命名为 TO INT .该按钮将检查并将您输入到文本框中的值作为实数整数返回.如果该值不是整数,则它将返回 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>
尝试不同的值并将它们转换为实数整数。
此方法检查您传递的变量的值,并返回该值的类型。
让我们举一个例子,其中,我们设计一个网页并检查输入值是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>
尝试其他值并检查类型。
imit()方法用于为特定数字设置下限值和上限值。 该数字不应超过上限值。 如果超过,则将数字更改为上限值。 这个过程也与下限相同。
让我们以提供一个用于输入值的文本框,提供用于检查该值限制的按钮的示例为例。 我们在示例中使用的默认限制是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()方法是将红色,绿色和蓝色值转换为十六进制值。 此函数处理数字,属于Array集合。 让我们举一个例子,其中,我们将设计一个网页来输入Red,Green和Blue的各个值。 提供一个按钮,将所有三个都转换为十六进制值。 看一下下面的代码。
示例
<!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>
尝试不同的红色,绿色和蓝色值,然后找到十六进制值。
让我们讨论一些可以控制输入String值的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 IT屋.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 IT屋.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>
此方法用于搜索给定字符串中的子字符串。 如果给定的字符串包含搜索字符串,则返回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 IT屋"; 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 IT屋</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>
在三个文本框中输入文本,然后单击替换字符串按钮,然后您将看到替换字符串.