123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247 |
- <?xml version="1.0"?>
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>Testing Javascript</title>
- <script type="text/javascript">
- var seen = {};
- function updateContent(input) {
- document.getElementById('result').innerHTML = "<p>" + input.value + "</p>";
- }
- function displayMessage(message) {
- document.getElementById('result').innerHTML = "<p>" + message + "</p>";
- }
- function appendMessage(message) {
- document.getElementById('result').innerHTML += message + " ";
- }
- function register(message) {
- if (!seen[message]) {
- appendMessage(message);
- seen[message] = true;
- }
- }
- function delayedShowHide(delay, show) {
- var blackBox = document.getElementById('clickToHide');
- window.setTimeout(function() {
- blackBox.style.display = show ? '' : 'none';
- }, delay);
- }
- </script>
- <script type="text/javascript">
- var startList = function() {
- // Ugh. Let's hope no-one is faking their user agent when running the tests
- if (navigator.userAgent.indexOf("MSIE") != -1) {
- var navRoot = document.getElementById("nav");
- for (var i = 0; i < navRoot.childNodes.length; i++) {
- var node = navRoot.childNodes[i];
- if (node.nodeName == "LI") {
- node.onmouseover = function() {
- this.className += " over";
- };
- node.onmouseout = function() {
- this.className = this.className.replace(" over", "");
- };
- }
- }
- }
- };
- window.onload=startList;
- </script>
- <style type="text/css">
- #nav {
- padding: 0; margin: 0; list-style: none;
- }
- #nav li {
- float: left; position: relative; width: 10em;
- }
- #nav li ul {
- display: none; position: absolute; top: 1em; left: 0;
- }
- #nav li > ul { top: auto; left: auto; }
- #nav li:hover ul, #nav li.over ul{ display: block; background: white; }
- </style>
- </head>
- <body>
- <h1>Type Stuff</h1>
- <div>
- <ul id="nav">
- <li id="menu1">Menu 1
- <ul>
- <li id="item1" onclick="displayMessage('item 1');">Item 1</li>
- <li>Item 2</li>
- </ul>
- </li>
- </ul>
- </div>
- <div id="result">
-
- </div>
- <div id="formageddon">
- <form action="#">
- Key Up: <input type="text" id="keyUp" onkeyup="javascript:updateContent(this)"/><br/>
- Key Down: <input type="text" id="keyDown" onkeydown="javascript:updateContent(this)"/><br/>
- Key Press: <input type="text" id="keyPress" onkeypress="javascript:updateContent(this)"/><br/>
- Change: <input type="text" id="change" onkeypress="javascript:displayMessage('change')"/><br/>
- <textarea id="keyDownArea" onkeydown="javascript:updateContent(this)" rows="2" cols="15"></textarea>
- <textarea id="keyPressArea" onkeypress="javascript:updateContent(this)" rows="2" cols="15"></textarea>
- <textarea id="keyUpArea" onkeyup="javascript:updateContent(this)" rows="2" cols="15"></textarea>
- <select id="selector" onchange="javascript:updateContent(this)">
- <option value="foo">Foo</option>
- <option value="bar">Bar</option>
- </select>
- <input type="checkbox" id="checkbox" value="checkbox thing" onchange="javascript:updateContent(this)"/>
- <input id="clickField" type="text" onclick="document.getElementById('clickField').value='Clicked';" value="Hello"/>
- <input id="clearMe" value="Something" onchange="displayMessage('Cleared')"/>
- </form>
- </div>
- <div>
- <p><a href="#" onclick="javascript:document.title='Changed'">Change the page title!</a></p>
- <p><a onclick="javascript:document.title='Changed'" id="nohref">No href</a></p>
- <p><a id="updatediv" href="#" onclick="javascript:document.getElementById('dynamo').innerHTML = 'Fish and chips!';">Update a
- div</a></p>
- </div>
- <div id="dynamo">What's for dinner?</div>
- <div id="mousedown" onmousedown="javascript:displayMessage('mouse down');">
- <p>Click for the mouse down event</p>
- <span><p id="child">Here's some text</p></span>
- </div>
- <div id="mouseup" onmouseup="javascript:displayMessage('mouse up');">
- <p>Click for the mouse up event</p>
- </div>
- <div id="mouseclick" onclick="javascript:displayMessage('mouse click');">
- <p>Click for the mouse click event</p>
- </div>
- <div id="error" onclick="document.getElementById('doesnotexist').innerHTML = 'cheese';">
- Clicking this causes a JS exception in the click handler
- </div>
- <div>
- <form action="resultPage.html" id="on-form">
- <input id="theworks"
- onfocus="appendMessage('focus')"
- onkeydown="appendMessage('keydown')"
- onkeypress="appendMessage('keypress')"
- onkeyup="appendMessage('keyup')"
- onblur="appendMessage('blur')"
- onchange="appendMessage('change')"
- />
- <input id="changeable" name="changeable" onfocus="appendMessage('focus')" onchange="appendMessage('change')" onblur="appendMessage('blur')"/>
- <button type="button" id="plainButton"
- onfocus="appendMessage('focus')"
- onkeydown="appendMessage('keydown')"
- onkeypress="appendMessage('keypress')"
- onkeyup="appendMessage('keyup')"
- onblur="appendMessage('blur')"
- onclick="appendMessage('click')"
- onmousedown="appendMessage('mousedown ')"
- onmouseup="appendMessage('mouseup ')"
- onmouseover="register('mouseover ')"
- onmousemove="register('mousemove ')"
- >
- <b>Go somewhere</b>
- </button>
- <button type="submit" id="submittingButton"><emph>submit</emph></button>
- <button type="button" id="jsSubmitButton" onclick="javascript:document.getElementById('on-form').submit();">Submitomatic</button>
- <button type="button" id="switchFocus" onclick="document.getElementById('theworks').focus();">Switch focus</button>
- <button type="button" onclick="var element = document.getElementById('switchFocus'); var clickEvent = document.createEvent('MouseEvents'); clickEvent.initMouseEvent('click', true, true, null, 0, 0, 0, 0, 0,false, false, false, false, 0, element);element.dispatchEvent(clickEvent);">Do magic</button>
- </form>
- <form action="javascriptPage.html" id="submitListeningForm" onsubmit="appendMessage('form-onsubmit '); return false;">
- <p>
- <input id="submitListeningForm-text" type="text" onsubmit="appendMessage('text-onsubmit ')" onclick="appendMessage('text-onclick ');" />
- <input id="submitListeningForm-submit" type="submit" onsubmit="appendMessage('submit-onsubmit ')" onclick="appendMessage('submit-onclick ');" />
- </p>
- </form>
- </div>
- <p id="suppressedParagraph" style="display: none">A paragraph suppressed using CSS display=none</p>
- <div>
- <p id="displayed">Displayed</p>
- <form action="#"><input type="hidden" name="hidden" /> </form>
- <p id="none" style="display: none;">Display set to none</p>
- <p id="hidden" style="visibility: hidden;">Hidden</p>
- <div id="hiddenparent" style="height: 2em; display: none;">
- <div id="hiddenchild">
- <a href="#" id="hiddenlink">ok</a>
- </div>
- </div>
- <div style="visibility: hidden;">
- <span>
- <input id="unclickable" />
- <input type="checkbox" id="untogglable" checked="checked" />Check box you can't see
- </span>
- </div>
- <p id="outer" style="visibility: hidden">A <b id="visibleSubElement" style="visibility: visible">sub-element that is explicitly visible</b> using CSS visibility=visible</p>
- </div>
- <div>
- <form>
- <input type="text" id="keyReporter" size="80"
- onkeyup="appendMessage('up: ' + event.keyCode)"
- onkeypress="appendMessage('press: ' + event.keyCode)"
- onkeydown="displayMessage(''); appendMessage('down: ' + event.keyCode)" />
- <input name="suppress" onkeydown="if (event.preventDefault) event.preventDefault(); event.returnValue = false; return false;" onkeypress="appendMessage('press');"/>
- </form>
- </div>
- <!-- Used for testing styles -->
- <div style="background-color: green;" id="green-parent">
- <p id="style1">This should be greenish</p>
- <ul>
- <li id="green-item">So should this</li>
- <li id="red-item" style="background-color: red;">But this is red</li>
- </ul>
- </div>
- <p id="zeroheight" style="height:0px;">This is a foo</p>
- <p id="zerowidth" style="width:0;">This is a bar</p>
- <a href="#" id="close" onclick="window.close();">Close window</a>
- <div id="delete" onclick="var d = document.getElementById('deleted'); this.removeChild(d);">
- <p id="deleted">I should be deleted when you click my containing div</p>
- <p>Whereas, I should not</p>
- </div>
- <div>
- <span id="hideMe" onclick="this.style.display = 'none';">Click to hide me.</span>
- </div>
- <div style="margin-top: 10px;">
- Click actions delayed by 3000ms:
- <div id="clickToShow" onclick="delayedShowHide(3000, true);"
- style="float: left;width: 100px;height:100px;border: 1px solid black;">
- Click to show black box
- </div>
- <div id="clickToHide" onclick="delayedShowHide(3000, false);"
- style="float: left;width: 100px;height:100px;border: 1px solid black;
- background-color: black; color: white; display: none;">
- Click to hide black box
- </div>
- <div style="clear: both"></div>
- </div>
- </body>
- </html>
|