[{"data":1,"prerenderedAt":535},["ShallowReactive",2],{"content-\u002Fdocs\u002Fbinding-inputs\u002Ftext-number-textarea":3},{"id":4,"title":5,"body":6,"description":514,"extension":515,"meta":516,"metaRows":517,"navigation":529,"path":530,"seo":531,"source":532,"stem":533,"__hash__":534},"docs\u002Fdocs\u002Fbinding-inputs\u002Ftext-number-textarea.md","Text, number, textarea",{"type":7,"value":8,"toc":507},"minimark",[9,13,20,23,37,41,46,171,177,181,184,300,372,386,393,412,461,470,474,503],[10,11,5],"h1",{"id":12},"text-number-textarea",[14,15,16],"blockquote",{},[17,18,19],"p",{},"One directive, three native inputs, three leaf types: text → string, number → number, textarea → string.",[21,22],"docs-meta-table",{},[17,24,25,26,30,31,36],{},"Type into all three inputs and watch the JSON readout update. The number input's value lands as a ",[27,28,29],"code",{},"number"," (not a string), even though the DOM only deals in strings. The directive handles the leaf-type coercion; the ",[32,33,35],"a",{"href":34},"\u002Fdocs\u002Fbinding-inputs\u002Fcoercion","Schema-driven coercion"," page explains the rule that powers it.",[38,39],"docs-demo",{"label":40,"slug":12},"Text Inputs Demo",[42,43,45],"h2",{"id":44},"bind-any-of-the-three","Bind any of the three",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-vue shiki shiki-themes github-light github-dark","\u003Cinput v-register=\"form.register('name')\" type=\"text\" \u002F>\n\u003Cinput v-register=\"form.register('age')\" type=\"number\" \u002F>\n\u003Ctextarea v-register=\"form.register('bio')\" \u002F>\n","vue","",[27,54,55,107,142],{"__ignoreMap":52},[56,57,60,64,68,72,75,79,82,85,88,91,94,96,99,101,104],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"sVt8B","\u003C",[56,65,67],{"class":66},"s9eBZ","input",[56,69,71],{"class":70},"sScJk"," v-register",[56,73,74],{"class":62},"=",[56,76,78],{"class":77},"sZZnC","\"",[56,80,81],{"class":62},"form.",[56,83,84],{"class":70},"register",[56,86,87],{"class":62},"(",[56,89,90],{"class":77},"'name'",[56,92,93],{"class":62},")",[56,95,78],{"class":77},[56,97,98],{"class":70}," type",[56,100,74],{"class":62},[56,102,103],{"class":77},"\"text\"",[56,105,106],{"class":62}," \u002F>\n",[56,108,110,112,114,116,118,120,122,124,126,129,131,133,135,137,140],{"class":58,"line":109},2,[56,111,63],{"class":62},[56,113,67],{"class":66},[56,115,71],{"class":70},[56,117,74],{"class":62},[56,119,78],{"class":77},[56,121,81],{"class":62},[56,123,84],{"class":70},[56,125,87],{"class":62},[56,127,128],{"class":77},"'age'",[56,130,93],{"class":62},[56,132,78],{"class":77},[56,134,98],{"class":70},[56,136,74],{"class":62},[56,138,139],{"class":77},"\"number\"",[56,141,106],{"class":62},[56,143,145,147,150,152,154,156,158,160,162,165,167,169],{"class":58,"line":144},3,[56,146,63],{"class":62},[56,148,149],{"class":66},"textarea",[56,151,71],{"class":70},[56,153,74],{"class":62},[56,155,78],{"class":77},[56,157,81],{"class":62},[56,159,84],{"class":70},[56,161,87],{"class":62},[56,163,164],{"class":77},"'bio'",[56,166,93],{"class":62},[56,168,78],{"class":77},[56,170,106],{"class":62},[17,172,173,174,176],{},"All three follow the same write pattern: ",[27,175,67],{}," event → directive reads the DOM value → coerces to the schema leaf type → writes to storage. No wrapper, no per-element binding code.",[42,178,180],{"id":179},"modifiers","Modifiers",[17,182,183],{},"Three modifiers apply across all text-family inputs:",[47,185,187],{"className":49,"code":186,"language":51,"meta":52,"style":52},"\u003Cinput v-register.lazy=\"form.register('name')\" type=\"text\" \u002F>\n\u003Cinput v-register.trim=\"form.register('name')\" type=\"text\" \u002F>\n\u003Cinput v-register.number=\"form.register('age')\" type=\"text\" \u002F>\n",[27,188,189,227,264],{"__ignoreMap":52},[56,190,191,193,195,197,200,203,205,207,209,211,213,215,217,219,221,223,225],{"class":58,"line":59},[56,192,63],{"class":62},[56,194,67],{"class":66},[56,196,71],{"class":70},[56,198,199],{"class":62},".",[56,201,202],{"class":70},"lazy",[56,204,74],{"class":62},[56,206,78],{"class":77},[56,208,81],{"class":62},[56,210,84],{"class":70},[56,212,87],{"class":62},[56,214,90],{"class":77},[56,216,93],{"class":62},[56,218,78],{"class":77},[56,220,98],{"class":70},[56,222,74],{"class":62},[56,224,103],{"class":77},[56,226,106],{"class":62},[56,228,229,231,233,235,237,240,242,244,246,248,250,252,254,256,258,260,262],{"class":58,"line":109},[56,230,63],{"class":62},[56,232,67],{"class":66},[56,234,71],{"class":70},[56,236,199],{"class":62},[56,238,239],{"class":70},"trim",[56,241,74],{"class":62},[56,243,78],{"class":77},[56,245,81],{"class":62},[56,247,84],{"class":70},[56,249,87],{"class":62},[56,251,90],{"class":77},[56,253,93],{"class":62},[56,255,78],{"class":77},[56,257,98],{"class":70},[56,259,74],{"class":62},[56,261,103],{"class":77},[56,263,106],{"class":62},[56,265,266,268,270,272,274,276,278,280,282,284,286,288,290,292,294,296,298],{"class":58,"line":144},[56,267,63],{"class":62},[56,269,67],{"class":66},[56,271,71],{"class":70},[56,273,199],{"class":62},[56,275,29],{"class":70},[56,277,74],{"class":62},[56,279,78],{"class":77},[56,281,81],{"class":62},[56,283,84],{"class":70},[56,285,87],{"class":62},[56,287,128],{"class":77},[56,289,93],{"class":62},[56,291,78],{"class":77},[56,293,98],{"class":70},[56,295,74],{"class":62},[56,297,103],{"class":77},[56,299,106],{"class":62},[301,302,303,316],"table",{},[304,305,306],"thead",{},[307,308,309,313],"tr",{},[310,311,312],"th",{},"Modifier",[310,314,315],{},"Effect",[317,318,319,345,355],"tbody",{},[307,320,321,327],{},[322,323,324],"td",{},[27,325,326],{},".lazy",[322,328,329,330,333,334,337,338,340,341,344],{},"Writes fire on ",[27,331,332],{},"change"," \u002F ",[27,335,336],{},"blur"," instead of every ",[27,339,67],{}," event. Matches Vue's ",[27,342,343],{},"v-model.lazy"," semantics.",[307,346,347,352],{},[322,348,349],{},[27,350,351],{},".trim",[322,353,354],{},"Strips leading and trailing whitespace before the write.",[307,356,357,362],{},[322,358,359],{},[27,360,361],{},".number",[322,363,364,365,368,369,199],{},"Coerces the DOM string to a number before the write. Useful when ",[27,366,367],{},"type=\"text\""," is required but the schema leaf is ",[27,370,371],{},"z.number()",[17,373,374,375,378,379,381,382,385],{},"The full set lives in the ",[32,376,180],{"href":377},"\u002Fdocs\u002Fbinding-inputs\u002Fmodifiers"," page; ",[27,380,361],{}," and ",[27,383,384],{},"\u003Cinput type=\"number\">"," are documented side-by-side there.",[42,387,389,390],{"id":388},"numeric-inputs-without-typenumber","Numeric inputs without ",[27,391,392],{},"type=\"number\"",[17,394,395,397,398,400,401,404,405,408,409,411],{},[27,396,384],{}," is the most direct bind, but it has spotty UX: some browsers swallow non-digit input on the fly, others allow it; decimal separators (",[27,399,199],{}," vs ",[27,402,403],{},",",") vary by locale; the spinner buttons can confuse keyboard users. When you want a numeric value in storage but full control of the keyboard, reach for ",[27,406,407],{},"\u003Cinput type=\"text\" inputmode=\"numeric\">"," paired with the ",[27,410,361],{}," modifier:",[47,413,415],{"className":49,"code":414,"language":51,"meta":52,"style":52},"\u003Cinput v-register.number=\"form.register('age')\" type=\"text\" inputmode=\"numeric\" \u002F>\n",[27,416,417],{"__ignoreMap":52},[56,418,419,421,423,425,427,429,431,433,435,437,439,441,443,445,447,449,451,454,456,459],{"class":58,"line":59},[56,420,63],{"class":62},[56,422,67],{"class":66},[56,424,71],{"class":70},[56,426,199],{"class":62},[56,428,29],{"class":70},[56,430,74],{"class":62},[56,432,78],{"class":77},[56,434,81],{"class":62},[56,436,84],{"class":70},[56,438,87],{"class":62},[56,440,128],{"class":77},[56,442,93],{"class":62},[56,444,78],{"class":77},[56,446,98],{"class":70},[56,448,74],{"class":62},[56,450,103],{"class":77},[56,452,453],{"class":70}," inputmode",[56,455,74],{"class":62},[56,457,458],{"class":77},"\"numeric\"",[56,460,106],{"class":62},[17,462,463,466,467,469],{},[27,464,465],{},"inputmode=\"numeric\""," is a regular DOM attribute. The directive doesn't intercept it; it passes through to the element. Mobile browsers show the numeric keyboard, desktop browsers accept any keystrokes, and the ",[27,468,361],{}," modifier coerces the DOM string to a number on write.",[42,471,473],{"id":472},"where-to-next","Where to next",[475,476,477,491,498],"ul",{},[478,479,480,482,483,485,486,485,488,490],"li",{},[32,481,180],{"href":377},": ",[27,484,326],{},", ",[27,487,351],{},[27,489,361],{}," in depth.",[478,492,493,497],{},[32,494,496],{"href":495},"\u002Fdocs\u002Fbinding-inputs\u002Ftransforms","Register transforms",": composable per-field write transforms.",[478,499,500,502],{},[32,501,35],{"href":34},": how the directive maps DOM strings to leaf types.",[504,505,506],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":52,"searchDepth":109,"depth":109,"links":508},[509,510,511,513],{"id":44,"depth":109,"text":45},{"id":179,"depth":109,"text":180},{"id":388,"depth":109,"text":512},"Numeric inputs without type=\"number\"",{"id":472,"depth":109,"text":473},"The native text family (type=\"text\", type=\"number\", and \u003Ctextarea>) all bind through v-register. The number input lands in storage as a number, the strings as strings.","md",{},[518,521,524,526],{"label":519,"value":520},"Category","Directive binding",{"label":522,"value":523,"kind":27},"Elements","\u003Cinput type=\"text\"> · \u003Cinput type=\"number\"> · \u003Ctextarea>",{"label":180,"value":525,"kind":27},".lazy · .trim · .number",{"label":527,"value":528},"Auto-installed","Yes",true,"\u002Fdocs\u002Fbinding-inputs\u002Ftext-number-textarea",{"title":5,"description":514},null,"docs\u002Fbinding-inputs\u002Ftext-number-textarea","CP1AC8euLXQi5wsyeuEkt1-x67R5j8HoQUWya7PG6qo",1780949758943]