45:["$","title",null,{"children":"Text Input / Observable Inputs | 1907040204 | Observable"}] 4d:[{"id":"eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c","href":"https://static.observableusercontent.com/files/eee4d2a928a36026dab4281b76deb7fe0cd885f1c6df6e546efb79db7e5fa5ccc98a395f865d31c1db3344ff1734683764bb1a63871fb1b39f77bb810f49699c","name":"us-state-capitals.tsv","type":"text/tab-separated-values","lastModified":1637629859276.147,"size":2886}] 49:{"id":"a4b0ae246dfac873","slug":"text-input-observable-inputs","title":"Text Input / Observable Inputs","thumbnail":"bd09193d4dec1bbd3c29f5901234fc3690d9356df5f236ae03aac64536c65930","access_level":"public","create_time":"$D2021-11-23T01:10:59.276Z","update_time":"$D2021-11-23T01:17:52.816Z","view_time":null,"first_public_time":"$D2021-11-23T01:18:01.951Z","has_unpublished_edits":null,"fork":{"id":"78846520e419c7b6","slug":"input-text","title":"Text Input / Observable Inputs","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab95e94d333ab49b","login":"1907040204","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":258,"publish_version":258,"role":null,"authored":false,"authors":[{"type":"individual","id":"f754f88d18fb368a","login":"1907040204","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f754f88d18fb368a","login":"1907040204","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Text Input / Observable Inputs","cells":[{"id":0,"value":"

Text Input / Observable Inputs

Observable Inputs › Text · API

\n\n# Input: Text\n\nText 允许自由形式的单行文本输入。（对于多行输入，请参阅 [Textarea](/@observablehq/input-textarea)）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"在最基本的形式中，Text 是一个空白框，其值为空字符串。当用户在框中键入时，文本的值会发生变化。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof text = Inputs.text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"text","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"这里建议提供*label* 和 *placeholder*以提高可用性。如果需要，还可以提供初始值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof name = Inputs.text({label: \"Name\", placeholder: \"Enter your name\", value: \"Anonymous\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"如果需要对样式进行更多控制，则标签可以是文本字符串或 HTML 元素。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"viewof signature = Inputs.text({label: html`Fancy`, placeholder: \"What’s your fancy?\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"F对于特定类别的文本，例如电子邮件地址和电话号码，您可以提供一种 [HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types) ，例如电子邮件、tel（电话号码）或 url，作为类型选项。或者，使用方便的方法：Inputs.email、Inputs.password、Inputs.tel 或 Inputs.url。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"viewof password = Inputs.password({label: \"Password\", value: \"open sesame\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"password","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"这里还支持 HTML5 *pattern*, *spellcheck*, *minlength*, 和 *maxlength*选项。如果用户输入无效输入，浏览器可能会显示警告（例如，“输入电子邮件地址”）。您还可以通过调用 [*form*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity) 来检查当前值是否有效。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof email = Inputs.text({type: \"email\", label: \"Email\", placeholder: \"Enter your email\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"[email, viewof email.checkValidity()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"如果输入将触发一些昂贵的计算，例如从远程服务器获取，则提交选项可用于推迟 Text 报告新值，直到用户单击提交按钮或按 Enter。 submit 的值也可以是提交按钮所需的内容（字符串或 HTML）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof query = Inputs.text({label: \"Query\", placeholder: \"Search\", submit: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"query","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"要提供一组推荐的值，请将字符串数组作为 *datalist* 选项传递。例如，下面的输入旨在接受美国州名；可以手动输入州名，也可以单击有关焦点的建议之一。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"capitals = FileAttachment(\"us-state-capitals.tsv\").tsv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"viewof state = Inputs.text({\n label: \"U.S. state\",\n placeholder: \"Enter state name\",\n datalist: capitals.map(d => d.State)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"state","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"要防止文本的值被更改，请使用 *disabled* 选项。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof fixed = Inputs.text({label: \"Fixed value\", value: \"Can’t edit me!\", disabled: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"fixed","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null