- MooTools教程
- MooTools - 主页
- MooTools - 简介
- MooTools - 安装
- MooTools - 程序结构
- MooTools - 选择器
- MooTools - 使用数组
- MooTools - 函数
- MooTools - 事件处理
- MooTools - DOM 操作
- MooTools - 样式属性
- MooTools - 输入过滤
- MooTools - 拖放
- MooTools - 正则表达式
- MooTools - 期刊
- MooTools - 滑块
- MooTools - 可排序
- MooTools - 手风琴
- MooTools - 工具提示
- MooTools - 选项卡式内容
- MooTools - 类
- MooTools - Fx.Element
- MooTools - Fx.Slide
- MooTools - Fx.Tween
- MooTools - Fx.Morph
- MooTools - Fx.Options
- MooTools - Fx.Events
- MooTools 有用资源
- MooTools - 快速指南
- MooTools - 有用的资源
- MooTools - 讨论
MooTools - 输入过滤
MooTools可以过滤用户输入，并且可以轻松识别输入的类型。基本输入类型是数字和字符串。
数字函数
让我们讨论一些检查输入值是否为数字的方法。这些方法还将帮助您操作数字输入。
toInt()
此方法将任何输入值转换为整数。您可以在变量上调用它，它将尝试从变量包含的任何内容中给出常规整数。
让我们举一个例子，设计一个包含文本框和名为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>
您将收到以下输出 -
输出
尝试不同的值并将它们转换为实数。
类型（）
此方法检查您传递的变量的值，并返回该值的类型。
让我们举个例子，我们设计一个网页并检查输入值是数字、字符串还是布尔值。看看下面的代码。
例子
<!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() 方法是将红、绿、蓝值转换为十六进制值。该函数处理数字，属于Array集合。让我们举一个例子，我们将设计一个网页来输入红色、绿色和蓝色的单独值。提供一个按钮将所有三个值转换为十六进制值。看看下面的代码。
例子
<!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();
或者，
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 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>
您将收到以下输出 -
输出
在上面的警告框中，您可以发现调用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 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>
您将收到以下输出 -
输出
包含（）
该方法用于搜索给定字符串中的子字符串。如果给定字符串包含搜索字符串，则返回 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 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>
您将收到以下输出 -
输出
代替（）
该方法用于将输入字符串插入到主字符串中。看看下面的代码。
例子
<!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>
您将收到以下输出 -
输出
在三个文本框中输入文本，然后单击替换字符串按钮，然后您将看到替换字符串。