InputAffix/test.html at master · jcoc611/InputAffix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
	<title>jQuery InputAffix v1.1.1 Test</title>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="InputAffix.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#testPrefix").prefix("Test: ");
		$("#testSuffix").suffix("%");
		$("#testSuffix2").suffix(" Suffix");
		$("#testDual").prefix("Angle: ").suffix("°");
		$("#testMultiplePrefixes").prefix(["#", "$", "&"]).on("prefixchange", function(e, pre){
			$("#multiplePrefixesMessage").text(pre);
		});
		$("#testMultipleSuffixes").suffix(["#", "$", "&"]).on("suffixchange", function(e, suff){
			$("#multipleSuffixesMessage").text(suff);
		});
		$("#testPlaceholder").prefix("#");
		$("#testPlaceholder2").suffix("%");
		$("#testPlaceholder3").prefix("Angle: ").suffix("°");
	});
	</script>
</head>
<body>
	<h1>Input Affix v1.1.0 Tests</h1>
	<span>Prefix test <i>(Test: )</i> </span><input id="testPrefix" value="something"></input><br/><br/>
	<span>Suffix test <i>(%)</i> </span><input id="testSuffix" value="100"></input><br/><br/>
	<span>Suffix test 2 <i>( Suffix)</i> </span><input id="testSuffix2" value="test"></input><br/><br/>
	<span>Dual test <i>(Angle: ...°)</i> </span><input id="testDual" value="100"></input><br/><br/>
	<span>Multiple prefixes <i>(#, $, or &amp;)</i></span><input id="testMultiplePrefixes" value="000"></input><br/><br/>
	<span>Current Prefix for input above: <i id="multiplePrefixesMessage">#</i></span><br/><br/>
	<span>Multiple suffixes <i>(#, $, or &amp;)</i></span><input id="testMultipleSuffixes" value="000"></input><br/><br/>
	<span>Current Suffix for input above: <i id="multipleSuffixesMessage">#</i></span><br/><br/>
	<span>Placeholder test <i>(#)</i> </span><input id="testPlaceholder" placeholder="#hashtag"></input><br/><br/>
	<span>Placeholder test 2 <i>(%)</i> </span><input id="testPlaceholder2" placeholder="100%"></input><br/><br/>
	<span>Placeholder test 3 <i>(Angle: ...°)</i> </span><input id="testPlaceholder3" placeholder="Angle: 180°"></input><br/><br/>
	<span>Try it out for your self!</span>
</body>
</html>