微信小程序提供了两种输入类型的输入框组件，分别是单行输入框 和多行输入框 </code>。</p> <p><strong>1. 单行输入组件（input）</strong></p> <p>单行输入框 <code><input></code> <code><input></code> 是一个用于收集<a href="https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"用户输入\"}"}" data-tit="用户输入" data-pretit="用户输入">用户输入</a>的组件，主要用于收集单行文本输入。</p> <p>input组件用于录入单行文本，尽管input的基本功能是文本录入，但该组件的属性还是比较多的，也比较复杂。</p> <p>重要的属性有：</p> <p>主要的监听事件有：</p> <ul><li><code>value</code>：输入框的初始内容</li><li><code>type</code>：input 的类型，如 text, number, idcard, digit等</li><li><code>password</code>：是否是密码类型</li><li><code>placeholder</code>：输入框为空时占位符</li><li><code>disabled</code>：是否禁用</li><li><code>maxlength</code>：最大输入长度</li><li><code>confirm-type</code>：设置键盘右下角按钮的文字，如 send, search, next, go, done等</li><li><code>confirm-hold</code>：点击键盘右下角按钮时是否保持键盘不收起</li><li><code>bindinput</code>：当键盘输入时，触发 input 事件</li><li><code>bindfocus</code>：输入框聚焦时触发</li><li><code>bindblur</code>：输入框失去焦点时触发</li><li><code>bindconfirm</code>：点击完成时，键盘输入法收起的事件</li></ul> <blockquote> <p>如下为input组件的属性及其含义：</p> <ul><li>value：String类型，输入框的当前内容</li><li>type：String类型，默认值是text。可指定的值：text, number, idcard, digit</li><li>password：Boolean类型，默认值是false，是否以密码形式录入文本（所有的文本字符都显示为点）</li><li>placeholder：String类型，输入框为空时显示的文本</li><li>placeholder-style：String类型，指定 placeholder 的样式</li><li>placeholder-class：String类型，指定 placeholder 的样式名称</li><li>disabled：Boolean类型，默认值是false，表示是否禁用输入框</li><li>maxlength：Number类型，默认值是140，表示文本最大输入长度，设置为 -1 的时候不限制最大长度</li><li>auto-focus：Boolean类型，默认值是false，该属性为true，可以让当前输入框自动获得焦点，并且自动弹出软键盘。该属性只能在真机上测试，小程序开发工具目前没有软键盘。同一个wxml文件中，只能有一个输入框设置该属性为true，输入框还包括后面要介绍的textarea组件</li><li>focus：Boolean类型，默认值是false，该属性可以让输入框获的焦点，目前开发工具暂不支持，只能在真机上测试</li><li>bindinput：EventHandle类型 ，除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容</li><li>bindfocus ：EventHandle类型，输入框获得焦点时触发，event.detail = {value: value}</li><li>bindblur：EventHandle类型，输入框失去焦点时触发，event.detail = {value: value}</li></ul> <p>注意：这些属性中，auto-focus和focus目前只能在真机上测试。</p> </blockquote> <p>常用使用方法实例：</p> <pre data-index="0" class="set-code-show" name="code"><code class="language-XML hljs"><ol class="hljs-ln" style="width:833px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入你的姓名"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"默认值"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder-style</span>=<span class="hljs-string">"color:green"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"占位符字体是绿色的"</span> <span class="hljs-attr">auto-focus</span>/></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这个只有在按钮点击的时候才聚焦"</span> <span class="hljs-attr">focus</span>=<span class="hljs-string">"{{focus}}"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"bindButtonTap"</span>></span>使得输入框获取焦点（在真机上测试）<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"最大输入长度10"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span>></span>你输入的是：{{inputValue}}<span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindKeyInput"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"输入同步到view中"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindReplaceInput"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"将<和>进行转义"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindHideKeyboard"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"输入close自动收起键盘"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"emoji"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这是一个带有表情的输入框"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"digit"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"带小数点的数字键盘"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"idcard"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"身份证输入键盘"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">password</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入你的密码"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>完整实现代码如下：</p> <pre data-index="1" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-title class_">Page</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">data</span>:{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">focus</span>:<span class="hljs-literal">false</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">inputValue</span>:<span class="hljs-string">""</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindButtonTap</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">focus</span>:<span class="hljs-literal">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindKeyInput</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">inputValue</span>:e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 当输入<和>是，会自动转换为<和></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindReplaceInput</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> value = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> pos = e.<span class="hljs-property">detail</span>.<span class="hljs-property">cursor</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(pos != -<span class="hljs-number">1</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//光标在中间</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> left = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>.<span class="hljs-title function_">slice</span>(<span class="hljs-number">0</span>,pos);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//计算光标的位置</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> pos = left.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/</g</span>,<span class="hljs-string">'<'</span>).<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/>/g</span>,<span class="hljs-string">'>'</span>).<span class="hljs-property">length</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">value</span>:value.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/</g</span>,<span class="hljs-string">'<'</span>).<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/>/g</span>,<span class="hljs-string">'>'</span>),</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">cursor</span>:pos</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindHideKeyboard</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span> === <span class="hljs-string">"close"</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//收起键盘</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> wx.<span class="hljs-title function_">hideKeyboard</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">})</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <strong>2. 多行文本组件（textarea）</strong></p> <p>多行输入框 <code><textarea></code> <code><textarea></code> 是用来输入多行文本的。</p> <p>textarea允许输入多行文本，如果文本行数超过textarea组件的高度，会出现垂直滚动条。</p> <p>重要的属性有：</p> <ul><li><code>value</code>：输入框的初始内容</li><li><code>placeholder</code>：输入框为空时占位符</li><li><code>disabled</code>：是否禁用</li><li><code>maxlength</code>：最大输入长度</li><li><code>autoHeight</code>：是否自动增高，设置autoHeight时，style.height不生效</li></ul> <p>主要的监听事件同 <code><input></code>。</p> <blockquote> <p>textarea有如下几个属性。</p> <ul><li>value：String类型，输入框的内容</li><li>placeholder：String类型，输入框为空时显示的文本</li><li>placeholder-style：String类型，指定 placeholder 的样式</li><li>placeholder-class：String类型，指定 placeholder 的样式类名称</li><li>disabled：Boolean类型，默认值是false，是否禁用textarea组件</li><li>maxlength：Number类型，默认值是140，最大输入长度，设置为0的时候不限制最大长度</li><li>auto-focus：Boolean类型，默认值是false，用于自动聚焦，当获得焦点后，自动弹出软键盘，当前页面中只能有一个 <textarea/> 或 <input/> 设置 auto-focus 属性</li><li>focus：Boolean类型，默认值是false，获取焦点（开发工具暂不支持）</li><li>auto-height：Boolean类型，默认值是false，表示是否自动增高，设置auto-height时，style.height不生效</li><li>bindfocus ：EventHandle类型，输入框聚焦时触发</li><li>bindblur：EventHandle类型，输入框失去焦点时触发</li><li>bindlinechange：EventHandle 类型，输入框行数变化时调用</li></ul> </blockquote> <p>textarea组件的基本用法实例：</p> <pre data-index="2" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:838px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><view style=<span class="hljs-string">"margin:20px"</span>></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">bindblur</span>=<span class="hljs-string">"bindTextAreaBlur"</span> <span class="hljs-attr">auto-height</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"自动变高"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background:#ff0"</span>/></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></view></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"placeholder颜色是红色的"</span> <span class="hljs-attr">placeholder-style</span>=<span class="hljs-string">"color:red;"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这是一个可以自动聚焦的textarea"</span> <span class="hljs-attr">auto-focus</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这个只有在按钮点击的时候才聚焦"</span> <span class="hljs-attr">focus</span>=<span class="hljs-string">"{{focus}}"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-area"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"bindButtonTap"</span>></span>使得输入框获取焦点<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> 第一个textarea组件设置了auto-height属性，该组件会随着行数的增加而变高。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1567660">EL9在线快速部署安装Rancher</a> <br /> <a href="/Article/Index/1767487">音视频中文件的复用和解复用</a> <br /> <a href="/Article/Index/857984">纯手码优质JAVA面试八股文</a> <br /> <a href="/Article/Index/1523663">Spring、SpringMVC、SpringBoot的区别</a> <br /> <a href="/Article/Index/1054040">Python 数据恢复实战 - 恢复U盘中的chk文件，以及误删的文件</a> <br /> <a href="/Article/Index/949809">【PI仿真笔记2-电容模型2】</a> <br /> <a href="/Article/Index/635065">史上最简洁Kotlin版EventBus的使用教程</a> <br /> <a href="/Article/Index/1105935">为什么科技型企业需要“贯标”？</a> <br /> <a href="/Article/Index/641728">Day08_DM层建设实战，220625，hm，</a> <br /> <a href="/Article/Index/1492831">高防服务器主要运用在哪些场景？</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_62110645/article/details/134000482 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>
</code>。</p> <p><strong>1. 单行输入组件（input）</strong></p> <p>单行输入框 <code><input></code> <code><input></code> 是一个用于收集<a href="https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"用户输入\"}"}" data-tit="用户输入" data-pretit="用户输入">用户输入</a>的组件，主要用于收集单行文本输入。</p> <p>input组件用于录入单行文本，尽管input的基本功能是文本录入，但该组件的属性还是比较多的，也比较复杂。</p> <p>重要的属性有：</p> <p>主要的监听事件有：</p> <ul><li><code>value</code>：输入框的初始内容</li><li><code>type</code>：input 的类型，如 text, number, idcard, digit等</li><li><code>password</code>：是否是密码类型</li><li><code>placeholder</code>：输入框为空时占位符</li><li><code>disabled</code>：是否禁用</li><li><code>maxlength</code>：最大输入长度</li><li><code>confirm-type</code>：设置键盘右下角按钮的文字，如 send, search, next, go, done等</li><li><code>confirm-hold</code>：点击键盘右下角按钮时是否保持键盘不收起</li><li><code>bindinput</code>：当键盘输入时，触发 input 事件</li><li><code>bindfocus</code>：输入框聚焦时触发</li><li><code>bindblur</code>：输入框失去焦点时触发</li><li><code>bindconfirm</code>：点击完成时，键盘输入法收起的事件</li></ul> <blockquote> <p>如下为input组件的属性及其含义：</p> <ul><li>value：String类型，输入框的当前内容</li><li>type：String类型，默认值是text。可指定的值：text, number, idcard, digit</li><li>password：Boolean类型，默认值是false，是否以密码形式录入文本（所有的文本字符都显示为点）</li><li>placeholder：String类型，输入框为空时显示的文本</li><li>placeholder-style：String类型，指定 placeholder 的样式</li><li>placeholder-class：String类型，指定 placeholder 的样式名称</li><li>disabled：Boolean类型，默认值是false，表示是否禁用输入框</li><li>maxlength：Number类型，默认值是140，表示文本最大输入长度，设置为 -1 的时候不限制最大长度</li><li>auto-focus：Boolean类型，默认值是false，该属性为true，可以让当前输入框自动获得焦点，并且自动弹出软键盘。该属性只能在真机上测试，小程序开发工具目前没有软键盘。同一个wxml文件中，只能有一个输入框设置该属性为true，输入框还包括后面要介绍的textarea组件</li><li>focus：Boolean类型，默认值是false，该属性可以让输入框获的焦点，目前开发工具暂不支持，只能在真机上测试</li><li>bindinput：EventHandle类型 ，除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容</li><li>bindfocus ：EventHandle类型，输入框获得焦点时触发，event.detail = {value: value}</li><li>bindblur：EventHandle类型，输入框失去焦点时触发，event.detail = {value: value}</li></ul> <p>注意：这些属性中，auto-focus和focus目前只能在真机上测试。</p> </blockquote> <p>常用使用方法实例：</p> <pre data-index="0" class="set-code-show" name="code"><code class="language-XML hljs"><ol class="hljs-ln" style="width:833px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入你的姓名"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"默认值"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder-style</span>=<span class="hljs-string">"color:green"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"占位符字体是绿色的"</span> <span class="hljs-attr">auto-focus</span>/></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这个只有在按钮点击的时候才聚焦"</span> <span class="hljs-attr">focus</span>=<span class="hljs-string">"{{focus}}"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"bindButtonTap"</span>></span>使得输入框获取焦点（在真机上测试）<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"最大输入长度10"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span>></span>你输入的是：{{inputValue}}<span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindKeyInput"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"输入同步到view中"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindReplaceInput"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"将<和>进行转义"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">bindinput</span>=<span class="hljs-string">"bindHideKeyboard"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"输入close自动收起键盘"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-top:25px"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"emoji"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这是一个带有表情的输入框"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"digit"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"带小数点的数字键盘"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"idcard"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"身份证输入键盘"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">password</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"请输入你的密码"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p>完整实现代码如下：</p> <pre data-index="1" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-title class_">Page</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">data</span>:{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">focus</span>:<span class="hljs-literal">false</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">inputValue</span>:<span class="hljs-string">""</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindButtonTap</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">focus</span>:<span class="hljs-literal">true</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindKeyInput</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">inputValue</span>:e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> })</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">// 当输入<和>是，会自动转换为<和></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindReplaceInput</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> value = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> pos = e.<span class="hljs-property">detail</span>.<span class="hljs-property">cursor</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(pos != -<span class="hljs-number">1</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//光标在中间</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">var</span> left = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>.<span class="hljs-title function_">slice</span>(<span class="hljs-number">0</span>,pos);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//计算光标的位置</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> pos = left.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/</g</span>,<span class="hljs-string">'<'</span>).<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/>/g</span>,<span class="hljs-string">'>'</span>).<span class="hljs-property">length</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">return</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">value</span>:value.<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/</g</span>,<span class="hljs-string">'<'</span>).<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/>/g</span>,<span class="hljs-string">'>'</span>),</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">cursor</span>:pos</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">bindHideKeyboard</span>:<span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-keyword">if</span>(e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span> === <span class="hljs-string">"close"</span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment">//收起键盘</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> wx.<span class="hljs-title function_">hideKeyboard</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">})</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> <strong>2. 多行文本组件（textarea）</strong></p> <p>多行输入框 <code><textarea></code> <code><textarea></code> 是用来输入多行文本的。</p> <p>textarea允许输入多行文本，如果文本行数超过textarea组件的高度，会出现垂直滚动条。</p> <p>重要的属性有：</p> <ul><li><code>value</code>：输入框的初始内容</li><li><code>placeholder</code>：输入框为空时占位符</li><li><code>disabled</code>：是否禁用</li><li><code>maxlength</code>：最大输入长度</li><li><code>autoHeight</code>：是否自动增高，设置autoHeight时，style.height不生效</li></ul> <p>主要的监听事件同 <code><input></code>。</p> <blockquote> <p>textarea有如下几个属性。</p> <ul><li>value：String类型，输入框的内容</li><li>placeholder：String类型，输入框为空时显示的文本</li><li>placeholder-style：String类型，指定 placeholder 的样式</li><li>placeholder-class：String类型，指定 placeholder 的样式类名称</li><li>disabled：Boolean类型，默认值是false，是否禁用textarea组件</li><li>maxlength：Number类型，默认值是140，最大输入长度，设置为0的时候不限制最大长度</li><li>auto-focus：Boolean类型，默认值是false，用于自动聚焦，当获得焦点后，自动弹出软键盘，当前页面中只能有一个 <textarea/> 或 <input/> 设置 auto-focus 属性</li><li>focus：Boolean类型，默认值是false，获取焦点（开发工具暂不支持）</li><li>auto-height：Boolean类型，默认值是false，表示是否自动增高，设置auto-height时，style.height不生效</li><li>bindfocus ：EventHandle类型，输入框聚焦时触发</li><li>bindblur：EventHandle类型，输入框失去焦点时触发</li><li>bindlinechange：EventHandle 类型，输入框行数变化时调用</li></ul> </blockquote> <p>textarea组件的基本用法实例：</p> <pre data-index="2" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:838px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><view style=<span class="hljs-string">"margin:20px"</span>></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">bindblur</span>=<span class="hljs-string">"bindTextAreaBlur"</span> <span class="hljs-attr">auto-height</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"自动变高"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background:#ff0"</span>/></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></view></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"placeholder颜色是红色的"</span> <span class="hljs-attr">placeholder-style</span>=<span class="hljs-string">"color:red;"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这是一个可以自动聚焦的textarea"</span> <span class="hljs-attr">auto-focus</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin:20px"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"这个只有在按钮点击的时候才聚焦"</span> <span class="hljs-attr">focus</span>=<span class="hljs-string">"{{focus}}"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-area"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"bindButtonTap"</span>></span>使得输入框获取焦点<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p> 第一个textarea组件设置了auto-height属性，该组件会随着行数的增加而变高。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1567660">EL9在线快速部署安装Rancher</a> <br /> <a href="/Article/Index/1767487">音视频中文件的复用和解复用</a> <br /> <a href="/Article/Index/857984">纯手码优质JAVA面试八股文</a> <br /> <a href="/Article/Index/1523663">Spring、SpringMVC、SpringBoot的区别</a> <br /> <a href="/Article/Index/1054040">Python 数据恢复实战 - 恢复U盘中的chk文件，以及误删的文件</a> <br /> <a href="/Article/Index/949809">【PI仿真笔记2-电容模型2】</a> <br /> <a href="/Article/Index/635065">史上最简洁Kotlin版EventBus的使用教程</a> <br /> <a href="/Article/Index/1105935">为什么科技型企业需要“贯标”？</a> <br /> <a href="/Article/Index/641728">Day08_DM层建设实战，220625，hm，</a> <br /> <a href="/Article/Index/1492831">高防服务器主要运用在哪些场景？</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/m0_62110645/article/details/134000482 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>