| <!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> |
