MooTools - Filtrado de entrada
MooTools puede filtrar la entrada del usuario y puede reconocer fácilmente el tipo de entrada. Los tipos de entrada básicos son Número y Cadena.
Funciones numéricas
Analicemos algunos métodos que comprobarán si un valor de entrada es un número o no. Estos métodos también le ayudarán a manipular la entrada de números.
toInt ()
Este método convierte cualquier valor de entrada en un número entero. Puede llamarlo en una variable e intentará dar el entero regular de lo que contenga la variable.
Tomemos un ejemplo que diseña una página web que contiene un cuadro de texto y un botón llamado TO INT. El botón comprobará y devolverá el valor que ingresó en el cuadro de texto como un entero real. Si el valor no es un número entero, devolverá elNaNsímbolo. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
Pruebe diferentes valores y conviértalos en números enteros reales.
tipo de()
Este método examina el valor de una variable que pasa y devuelve el tipo de ese valor.
Tomemos un ejemplo en el que diseñamos una página web y verificamos si el valor de entrada es Número, Cadena o Booleano. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
Pruebe los diferentes valores y verifique el tipo.
límite()
El método limit () se utiliza para establecer los valores de límite inferior y superior para un número en particular. El número no debe exceder el valor límite superior. Si excede, entonces el número se cambia al valor del límite superior. Este proceso también es el mismo con el límite inferior.
Tomemos un ejemplo que proporciona un cuadro de texto para ingresar un valor, proporcione un botón para verificar el límite de ese valor. El límite predeterminado que usamos en el ejemplo es de 0 a 255. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
Pruebe con diferentes números para verificar el límite.
rgbToHex ()
El método rgbToHex () es convertir de los valores rojo, verde y azul al valor hexadecimal. Esta función se ocupa de los números y pertenece a la colección Array. Tomemos un ejemplo en el que diseñaremos una página web para ingresar los valores individuales de Rojo, Verde y Azul. Proporcione un botón para convertir los tres en valores hexadecimales. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
Pruebe diferentes valores de rojo, verde y azul y encuentre los valores hexadecimales.
Funciones de cadena
Analicemos algunos métodos de la clase String que pueden manipular el valor String de entrada. Antes de continuar, echemos un vistazo a la siguiente sintaxis de cómo llamar a una función de cadena.
Cuerda
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();O,
var result_of_function = "Heres some text".someStringFunction();podar()
Este método se utiliza para eliminar el espacio en blanco de la posición frontal y la posición final de una cuerda determinada. No toca ningún espacio en blanco dentro de la cuerda. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
En los cuadros de alerta anteriores, puede encontrar las diferencias en String antes de llamar al método trim () y después de llamar al método trim ().
limpiar()
Este método se utiliza para eliminar todos los espacios en blanco de la cadena dada y mantener un solo espacio entre las palabras. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
contiene ()
Este método se utiliza para buscar una subcadena en una cadena determinada. Si la cadena dada contiene la cadena de búsqueda, devuelve verdadero; de lo contrario, devuelve falso. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
sustituir()
Este método se utiliza para insertar la cadena de entrada en la cadena principal. Eche un vistazo al siguiente código.
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>Recibirá el siguiente resultado:
Output
Ingrese texto en los tres cuadros de texto y haga clic en el botón de cadena de sustitución, luego podrá ver la cadena de sustitución.