test/manual/input/index.html
<!doctype html>
<!-- Placeholders on this page should hide on input rather than on focus -->
<html data-placeholder-mode="input">
<head>
<meta charset="utf-8">
<title>Placekeeper Browser Test</title>
<link rel="stylesheet" href="../tests.css">
</head>
<body>
<h3>Browser back button</h3>
<p><a href="../">Link to previous page to test how polyfill works with browser back button</a></p>
<h3>Types</h3>
<!-- Polyfill should handle input elements with no type attribute (it should default to "text" in all browsers) -->
<input placeholder="Test no type">
<!-- Polyfill should handle input elements with various type attribute values -->
<input type="text" placeholder="Test text type">
<input type="search" placeholder="Test search type">
<input type="url" placeholder="Test url type">
<input type="tel" placeholder="Test tel type">
<input type="email" placeholder="Test email type">
<input type="number" placeholder="Test number type">
<input type="password" placeholder="Test password type">
<!-- Polyfill should handle textarea elements -->
<textarea placeholder="Test textarea"></textarea>
<h3>Maxlength</h3>
<!-- Polyfill should handle maxlength attribute if present -->
<input type="text" placeholder="Test maxlength" maxlength="4">
<h3>Similar CSS classes</h3>
<!-- Polyfill should not remove the wrong class name -->
<input type="text" placeholder="Placeholder should work normally" class="wrong-placeholder">
<h3>Initial value</h3>
<!-- Polyfill should handle elements with a placeholder and an initial value -->
<input type="text" placeholder="Test initial value" value="Initial value">
<input type="password" placeholder="Test initial value" value="Initial value">
<h3>Change value after page load</h3>
<!-- Polyfill should handle input values that change via script (this changes after 1s) -->
<input type="text" placeholder="Test changing value" id="handle1">
<input type="password" placeholder="Test changing value" id="handle2">
<h3>Change placeholder after page load</h3>
<!-- Polyfill should handle placeholder values that change via script (this changes after 1s) -->
<input type="text" placeholder="Test changing placeholder" id="handle3">
<input type="password" placeholder="Test changing placeholder" id="handle4">
<h3>Add placeholder after page load</h3>
<!-- Polyfill should handle placeholder values are added via script (this gets one after 1s) -->
<input type="text" id="handle5">
<input type="password" id="handle6">
<h3>Change input type (does not work in IE < 9)</h3>
<!-- Polyfill should handle input types that change after page load e.g. text->password -->
<input type="text" id="handle7" placeholder="Changed to password">
<input type="password" id="handle8" placeholder="Changed to text">
<h3>Remove placeholder attribute</h3>
<!-- Polyfill should handle the dynamic removal of the placeholder attribute -->
<input type="text" id="handle9" placeholder="Placeholder removed">
<input type="password" id="handle10" placeholder="Placeholder removed">
<h3>Form</h3>
<!-- Polyfill should not allow placeholder text to be submitted as part of a form -->
<form id="form1">
<input type="text" placeholder="Test form submission">
<input type="text" value="I should be submitted">
<input type="password" placeholder="Password">
<button type="submit">Submit form</button>
<button type="reset">Reset form</button>
</form>
<h3>Input with form attribute</h3>
<!-- Polyfill should handle input elements that specify their form with an attribute -->
<form id="form2">
<input type="text" form="form2" placeholder="Test form attribute">
</form>
<h3>Disabled inputs</h3>
<!-- Polyfill should handle disabled inputs -->
<input type="text" placeholder="Disabled text input" disabled>
<input type="password" placeholder="Disabled password input" disabled>
<h3>Enabled after page load</h3>
<!-- Polyfill should handle disabled input that gets enabled after 1s -->
<input id="d1" type="text" placeholder="Enabled text input" disabled>
<input id="d2" type="password" placeholder="Enabled password input" disabled>
<h3>Disabled after page load</h3>
<!-- Polyfill should handle enabled text input that gets disabled after 1s -->
<input id="e1" type="text" placeholder="Disabled text input">
<input id="e2" type="password" placeholder="Disabled password input">
<h3>Labels</h3>
<!-- Polyfill should handle inputs with labels -->
<label for="l1">Label for text input</label><br>
<input id="l1" type="text" placeholder="Text input with label">
<label for="l2">Label for password input</label><br>
<input id="l2" type="password" placeholder="Password input with label">
<h3>A Link with "javascript:void(0)"</h3>
<!-- Polyfill should handle javascript links -->
<p><a href="javascript:void(0)">A Link with "javascript:void(0)" as href</a></p>
<script src="../../../dist/placekeeper.js"></script>
<script src="tests.js"></script>
</body>
</html>