MooTools - Eingangsfilterung
MooTools kann die Benutzereingaben filtern und die Art der Eingabe leicht erkennen. Die grundlegenden Eingabetypen sind Number und String.
Zahlenfunktionen
Lassen Sie uns einige Methoden diskutieren, die prüfen, ob ein Eingabewert eine Zahl ist oder nicht. Diese Methoden helfen Ihnen auch bei der Bearbeitung der Zahleneingabe.
toInt ()
Diese Methode konvertiert jeden Eingabewert in die Ganzzahl. Sie können es für eine Variable aufrufen und es wird versucht, die reguläre Ganzzahl von dem zu geben, was die Variable enthält.
Nehmen wir ein Beispiel, das eine Webseite entwirft, die ein Textfeld und eine Schaltfläche mit dem Namen enthält TO INT. Die Schaltfläche überprüft den Wert, den Sie als echte Ganzzahl in das Textfeld eingegeben haben, und gibt ihn zurück. Wenn der Wert keine Ganzzahl ist, wird der Wert zurückgegebenNaNSymbol. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
Probieren Sie verschiedene Werte aus und konvertieren Sie sie in echte Ganzzahlen.
eine Art von()
Diese Methode untersucht den Wert einer Variablen, die Sie übergeben, und gibt den Typ dieses Werts zurück.
Nehmen wir ein Beispiel, in dem wir eine Webseite entwerfen und prüfen, ob der Eingabewert Number, String oder Boolean ist. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
Probieren Sie die verschiedenen Werte aus und überprüfen Sie den Typ.
Grenze()
Die Methode limit () wird verwendet, um die Werte für die Untergrenze und die Obergrenze für eine bestimmte Zahl festzulegen. Die Zahl sollte den oberen Grenzwert nicht überschreiten. Wenn es überschreitet, wird die Zahl auf den oberen Grenzwert geändert. Dieser Vorgang ist auch mit der Untergrenze identisch.
Nehmen wir ein Beispiel, das ein Textfeld zur Eingabe eines Werts enthält, und eine Schaltfläche, um die Grenze dieses Werts zu überprüfen. Das im Beispiel verwendete Standardlimit liegt zwischen 0 und 255. Sehen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
Probieren Sie verschiedene Zahlen aus, um das Limit zu überprüfen.
rgbToHex ()
Die Methode rgbToHex () konvertiert von den roten, grünen und blauen Werten in den hexadezimalen Wert. Diese Funktion behandelt Zahlen und gehört zur Array-Sammlung. Nehmen wir ein Beispiel, in dem wir eine Webseite entwerfen, auf der die einzelnen Werte für Rot, Grün und Blau eingegeben werden. Stellen Sie eine Schaltfläche bereit, um alle drei in hexadezimale Werte umzuwandeln. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
Probieren Sie verschiedene Rot-, Grün- und Blauwerte aus und ermitteln Sie die Hexadezimalwerte.
String-Funktionen
Lassen Sie uns einige Methoden der String-Klasse diskutieren, die den eingegebenen String-Wert manipulieren können. Bevor wir fortfahren, werfen wir einen Blick auf die folgende Syntax zum Aufrufen einer Zeichenfolgenfunktion.
String
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Oder,
var result_of_function = "Heres some text".someStringFunction();trimmen()
Diese Methode wird verwendet, um das Leerzeichen der vorderen Position und die Endposition einer bestimmten Zeichenfolge zu entfernen. Es berührt keine Leerzeichen innerhalb der Zeichenfolge. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
In den obigen Warnfeldern finden Sie die Unterschiede in String vor dem Aufrufen der trim () -Methode und nach dem Aufrufen der trim () -Methode.
reinigen()
Diese Methode wird verwendet, um alle Leerzeichen aus der angegebenen Zeichenfolge zu entfernen und ein Leerzeichen zwischen den Wörtern beizubehalten. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
enthält ()
Diese Methode wird verwendet, um eine Unterzeichenfolge in einer bestimmten Zeichenfolge zu suchen. Wenn die angegebene Zeichenfolge die Suchzeichenfolge enthält, wird true zurückgegeben, andernfalls wird false zurückgegeben. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
Ersatz()
Diese Methode wird verwendet, um die Eingabezeichenfolge in die Hauptzeichenfolge einzufügen. Schauen Sie sich den folgenden Code an.
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>Sie erhalten folgende Ausgabe:
Output
Geben Sie Text in die drei Textfelder ein und klicken Sie auf die Schaltfläche Ersatzzeichenfolge. Anschließend wird die Ersatzzeichenfolge angezeigt.