MooTools - Filtro di input
MooTools può filtrare l'input dell'utente e può riconoscere facilmente il tipo di input. I tipi di input di base sono Numero e Stringa.
Funzioni numeriche
Parliamo di alcuni metodi che controlleranno se un valore di input è un numero o meno. Questi metodi ti aiuteranno anche a manipolare l'input del numero.
toInt ()
Questo metodo converte qualsiasi valore di input nel numero intero. Puoi chiamarlo su una variabile e proverà a dare il numero intero regolare da qualunque cosa la variabile contenga.
Prendiamo un esempio che progetta una pagina web che contiene una casella di testo e un pulsante denominato TO INT. Il pulsante controllerà e restituirà il valore immesso nella casella di testo come numero intero reale. Se il valore non è un numero intero, restituirà ilNaNsimbolo. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
Prova valori diversi e convertili in numeri interi reali.
tipo di()
Questo metodo esamina il valore di una variabile che passi e restituisce il tipo di quel valore.
Facciamo un esempio in cui progettiamo una pagina web e controlliamo se il valore di input è Number, String o Boolean. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
Prova i diversi valori e controlla il tipo.
limite()
Il metodo limit () viene utilizzato per impostare i valori del limite inferiore e superiore per un numero particolare. Il numero non deve superare il valore limite superiore. Se supera, il numero viene modificato nel valore del limite superiore. Questo processo è lo stesso anche per il limite inferiore.
Prendiamo un esempio che fornisce una casella di testo per l'immissione di un valore, forniamo un pulsante per controllare il limite di quel valore. Il limite predefinito che abbiamo utilizzato nell'esempio è compreso tra 0 e 255. Dai un'occhiata al codice seguente.
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>Riceverai il seguente output:
Output
Prova numeri diversi per controllare il limite.
rgbToHex ()
Il metodo rgbToHex () consiste nel convertire dai valori rosso, verde e blu al valore esadecimale. Questa funzione si occupa dei numeri e appartiene alla collezione Array. Facciamo un esempio in cui progetteremo una pagina web per inserire i singoli valori per Rosso, Verde e Blu. Fornisci un pulsante per convertire tutti e tre i valori in valori esadecimali. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
Prova diversi valori di rosso, verde e blu e trova i valori esadecimali.
Funzioni stringa
Parliamo di alcuni metodi della classe String che possono manipolare il valore String di input. Prima di procedere, diamo un'occhiata alla seguente sintassi di come chiamare una funzione stringa.
Corda
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();O,
var result_of_function = "Heres some text".someStringFunction();trim ()
Questo metodo viene utilizzato per rimuovere gli spazi bianchi della posizione anteriore e la posizione finale di una determinata stringa. Non tocca gli spazi bianchi all'interno della stringa. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
Nelle caselle di avviso sopra, puoi trovare le differenze in String prima di chiamare il metodo trim () e dopo aver chiamato il metodo trim ().
pulito()
Questo metodo viene utilizzato per rimuovere tutti gli spazi bianchi dalla stringa data e mantenere uno spazio singolo tra le parole. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
contiene ()
Questo metodo viene utilizzato per cercare una sottostringa in una determinata stringa. Se la stringa data contiene la stringa di ricerca, restituisce true altrimenti restituisce false. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
sostituto()
Questo metodo viene utilizzato per inserire la stringa di input nella stringa principale. Dai un'occhiata al seguente codice.
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>Riceverai il seguente output:
Output
Inserisci il testo nelle tre caselle di testo e fai clic sul pulsante della stringa di sostituzione, quindi vedrai la stringa di sostituzione.