<!DOCTYPE html>
@WAIT-FOR:Ready
@EXECUTE-AND-WAIT-FOR:setTextHello()
@EXECUTE-AND-WAIT-FOR:setTextHelloWorld()
@BLINK-ALLOW:htmlTag*
@BLINK-ALLOW:className*
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Web Text Fields</title>
<script type="module">
import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js";
injectImportMap();
const components = [
"md-filled-text-field",
"md-outlined-text-field"
];
loadAndWaitForReady(components, () => {
const statusDiv = document.getElementById("status");
const textFields = [
{ tag: "md-filled-text-field", label: "Filled text field", id: "test-text-field" },
{ tag: "md-outlined-text-field", label: "Outlined text field" },
{ tag: "md-filled-text-field", label: "With value", value: "Default text" },
{ tag: "md-outlined-text-field", label: "Required field", required: true },
{ tag: "md-filled-text-field", label: "Disabled field", disabled: true },
{ tag: "md-outlined-text-field", label: "Password", type: "password" },
{ tag: "md-filled-text-field", label: "Email", type: "email" },
{ tag: "md-outlined-text-field", label: "Number", type: "number" },
{ tag: "md-filled-text-field", label: "With prefix text", prefixText: "$" },
{ tag: "md-outlined-text-field", label: "With suffix text", suffixText: ".com" }
];
textFields.forEach(fieldInfo => {
const field = document.createElement(fieldInfo.tag);
for (const key in fieldInfo) {
if (key !== "tag") {
field[key] = fieldInfo[key];
}
}
statusDiv.appendChild(field);
});
statusDiv.setAttribute("aria-label", "Ready");
});
</script>
</head>
<body>
<div id="status" aria-label="Loading">
</div>
</body>
<script>
async function setTextHello() {
const textField = document.getElementById("test-text-field");
if (textField) {
textField.value = "Hello";
await textField.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Text Field Set to Hello";
statusDiv.appendChild(statusText);
return "Text Field Set to Hello";
}
return "Failed to set Text Field";
}
async function setTextHelloWorld() {
const textField = document.getElementById("test-text-field");
if (textField) {
textField.value = "Hello World";
await textField.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Text Field Set to Hello World";
statusDiv.appendChild(statusText);
return "Text Field Set to Hello World";
}
return "Failed to set Text Field to Hello World";
}
</script>
</html>
