fastclick/tests/18.html at master · zfhslfgit/fastclick · 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
	p, label { font-family: sans-serif; }
	.test { text-align: center; }
	input[type=text] { height: 3em; width: 10em; }
	label { display: block; background: gray; line-height: 2em; display: inline-block; font-weight: bold; }

	/* Disable certain interactions on touch devices */
	body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; -webkit-highlight: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
</style>
<script type="application/javascript" src="../lib/fastclick.js"></script>
<script type="application/javascript">
	window.addEventListener('load', function () {
		new FastClick(document.body);
		document.getElementsByTagName('form')[0].addEventListener('submit', function(event) {
			event.preventDefault();
			console.log('Submit caught');
		}, false);
	}, false);
</script>
</head>
<body>
	<p>On focusing on the input text element, hitting go in the device keyboard should submit the form. The actual submission will be prevented and instead 'Submit caught' will appear in the console.</p>
	<div class="test">
		<form action="http://google.com/search" method="GET">
			<input type="text" id="query" name="q" placeholder="Tap me">
			<input type="submit" value="Submit">
		</form>
	</div>
</body>
</html>