支付宝小程序表单组件输入框·Textarea

支付宝小程序输入框（Textarea）。

API

属性名	类型	默认值	描述
name	String	-	输入控件名字，用于表单提交获取数据
value	String	-	输入框的初始内容
placeholder	String	-	暗性提示
class	String	-	外部样式名
style	String	-	内联样式
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大长度
focus	Boolean	false	获取焦点
auto-height	Boolean	false	是否自动增高
onInput	EventHandle	-	当键盘输入时，触发input事件，event.detail = {value: value}，可以直接 return 一个字符串以替换输入框的内容。
onFocus	EventHandle	-	输入框聚焦时触发，event.detail = {value: value}
onBlur	EventHandle	-	输入框失去焦点时触发，event.detail = {value: value}
onConfirm	EventHandle	-	点击完成时，触发 confirm 事件，event.detail = {value: value}

支付宝小程序 API

示例


  </view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button onTap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<view class="section">
  <form onSubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea"/>
    <button form-type="submit"> 提交 </button>
  </form>
</view></code></pre>
<pre><code>Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit: function(e) {
    console.log(e.detail.value.textarea)
  }
})</code></pre><hr></div>
        <div class="chapter"> <div class="prev">< <a href="aliminiapp-3oea28rp.html" rel="next" title="支付宝小程序表单组件 滑动选择器·Slider">支付宝小程序表单组件 滑动选择器·Slider</a></div> <div class="next"><a href="aliminiapp-pxew28rs.html" rel="next" title="支付宝小程序表单组件 Label">支付宝小程序表单组件 Label</a> ></div> </div>
    </div>

    <div id="rightcolumn">
        <div class="ColLeft fl">
            <div class="CategoryTree">
                <div class="titlebar"><h3>分类导航</h3></div>
                    <ul>
                        <li><a href="javascript:void(0);">HTML / CSS</a>
                            <ul>
                                <li><a href="/html/index.html">HTML 教程</a></li>
                                <li><a href="/html/html5-intro.html">HTML5 教程</a></li>
                                <li><a href="/css/css-tutorial.html">CSS 教程</a></li>
                                <li><a href="/css/css3-tutorial.html">CSS3 教程</a></li>
                                <li><a href="/bootstrap/index.html">Bootstrap 教程</a></li>
                                <li><a href="/charsets/index.html" target="_top">HTML 字符集</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">JavaScript</a>
                            <ul class="double-li">
                                <li><a href="/javascript/index.html">JavaScript 教程</a></li>
                                <li><a href="/htmldom/index.html" target="_top">HTML DOM 教程</a></li>
                                <li><a href="/jquery/index" target="_top">jQuery 教程</a></li>
                                <li><a href="/angularjs/index.html" target="_top">AngularJS 教程</a></li>
                                <li><a href="/jqueryui/index.html" target="_top">jQuery UI 教程</a></li>
                                <li><a href="/jquerymobile/index.html" target="_top">jQuery Mobile 教程</a></li>
                                <li><a href="/jeasyui/index.html">jQuery EasyUI 教程</a></li>
                                <li><a href="/nodejs/index.html" target="_top">Node.js 教程</a></li>
                                <li><a href="/ajax/index.html" target="_top">AJAX 教程</a></li>
                                <li><a href="/json/index.html" target="_top">JSON 教程</a></li>
                                <li><a href="/vbscript/index.html" target="_top">VBScript 教程</a></li>
                                <li><a href="/googleapi/index.html" target="_top">Google 地图教程</a></li>
                                <li><a href="/firebug/index.html" target="_top">Firebug 教程</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">服务端语言</a>
                            <ul class="double-li">
                                <li><a href="/php/php-tutorial.html" target="_top">PHP 教程</a></li>
                                <li><a href="/python/python-tutorial.html" target="_top">Python 教程</a></li>
                                <li><a href="/python3/python3-tutorial.html" target="_top">Python3 教程</a></li>
                                <li><a href="/ruby/ruby-tutorial.html" target="_top">Ruby 教程</a></li>
                                <li><a href="/linux/linux-tutorial.html" target="_top">Linux教程</a></li>
                                <li><a href="/java/java-tutorial.html" target="_top">Java 教程</a></li>
                                <li><a href="/c/index.html" target="_top">C 语言教程</a></li>
                                <li><a href="/servlet/servlet-tutorial.html" target="_top">Servlet 教程</a></li>
                                <li><a href="/jsp/jsp-tutorial.html" target="_top">JSP 教程</a></li>
                                <li><a href="/nodejs/nodejs-tutorial.html" target="_top">Node.js 教程</a></li>
                                <li><a href="/asp/asp-tutorial.html" target="_top">ASP 教程</a></li>
                                <li><a href="/csharp/csharp-tutorial.html" target="_top">C# 教程</a></li>
                                <li><a href="/ado/ado-tutorial.html" target="_top">ADO 教程</a></li>
                                <li><a href="/regexp/regexp-tutorial.html" target="_top">正则表达式教程</a></li>
                                <li><a href="/designpattern/design-pattern-tutorial.html" target="_top">设计模式</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">数据库</a>
                            <ul>
                                <li><a href="/sql/sql-tutorial.html" target="_top">SQL 教程</a></li>
                                <li><a href="/mysql/mysql-tutorial.html" target="_top">MySQL 教程</a></li>
                                <li><a href="/sqlite/sqlite-tutorial.html" target="_top">SQLite 教程</a></li>
                                <li><a href="/mongodb/mongodb-tutorial.html" target="_top">Mongodb 教程</a></li>
                                <li><a href="/redis/redis-tutorial.html" target="_top">Redis 教程</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">XML 语言</a>
                            <ul class="double-li">
                                <li><a href="/xml/xml-tutorial.html" target="_top">XML 教程</a></li>
                                <li><a href="/dtd/dtd-tutorial.html" target="_top">DTD 教程</a></li>
                                <li><a href="/dom/dom-tutorial.html" target="_top">XML DOM 教程</a></li>
                                <li><a href="/xsl/xsl-tutorial.html" target="_top">XSLT 教程</a></li>
                                <li><a href="/xpath/xpath-tutorial.html" target="_top">XPath 教程</a></li>
                                <li><a href="/xquery/xquery-tutorial.html" target="_top">XQuery 教程</a></li>
                                <li><a href="/xlink/xlink-tutorial.html" target="_top">XLink 教程</a></li>
                                <li><a href="/xlink/xlink-tutorial.html" target="_top">XPointer 教程</a></li>
                                <li><a href="/schema/schema-tutorial.html" target="_top">Schema 教程</a></li>
                                <li><a href="/soap/soap-tutorial.html" target="_top">SOAP 教程</a></li>
                                <li><a href="/wsdl/wsdl-tutorial.html" target="_top">WSDL 教程</a></li>
                                <li><a href="/rss/rss-tutorial.html" target="_top">RSS 教程</a></li>
                                <li><a href="/rdf/rdf-tutorial.html" target="_top">RDF 教程</a></li>
                                <li><a href="/xslfo/xslfo-tutorial.html" target="_top">XSL-FO 教程</a></li>
                                <li><a href="/svg/svg-tutorial.html" target="_top">SVG 教程</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">ASP.NET</a>
                            <ul>
                                <li><a href="/aspnet/aspnet-tutorial.html" title="ASP.NET 教程">ASP.NET 教程</a></li>
                                <li><a href="/csharp/csharp-tutorial.html" title="C# 教程">C# 教程</a></li>
                                <li><a href="/aspnet/webpages-intro.html" title="Web Pages 教程">Web Pages 教程</a></li>
                                <li><a href="/aspnet/razor-intro.html" title="Razor 教程">Razor 教程</a></li>
                                <li><a href="/aspnet/mvc-intro.html" title="MVC 教程">MVC 教程</a></li>
                                <li><a href="/aspnet/aspnet-intro.html" title="Web Forms 教程">Web Forms 教程</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">Web Services</a>
                            <ul>
                                <li><a href="/webservices/webservices-tutorial.html" target="_top">Web Services 教程</a></li>
                                <li><a href="/wsdl/wsdl-tutorial.html" target="_top">WSDL 教程</a></li>
                                <li><a href="/soap/soap-tutorial.html" target="_top">SOAP 教程</a></li>
                                <li><a href="/rss/rss-tutorial.html" target="_top">RSS 教程</a></li>
                                <li><a href="/rdf/rdf-tutorial.html" target="_top">RDF 教程</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">网站建设</a>
                            <ul>
                                <li><a href="/web/web-buildingprimer.html" target="_top">网站建设指南</a></li>
                                <li><a href="/browsers/browser-information.html" target="_top">Web 浏览器</a></li>
                                <li><a href="/http/http-tutorial.html" target="_top">HTTP 教程</a></li>
                                <li><a href="/hosting/hosting-tutorial.html" target="_top">Web 主机</a></li>
                                <li><a href="/tcpip/tcpip-tutorial.html" target="_top">Web TCP/IP</a></li>
                                <li><a href="/w3c/w3c-tutorial.html" target="_top">Web W3C</a></li>
                                <li><a href="/quality/quality-tutorial.html" target="_top">Web 品质</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">参考手册</a>
                            <ul class="double-li">
                                <li><a href="/htmlref/html-reference.html" target="_top">HTML 标签参考手册</a></li>
                                <li><a href="/htmlref/ref-eventattributes.html" target="_top">HTML 事件参考手册</a></li>
                                <li><a href="/htmlref/html-colorname.html" target="_top">HTML 颜色参考手册</a></li>
                                <li><a href="/cssref/css-reference.html" target="_top">CSS 1,2,3 参考手册</a></li>
                                <li><a href="/jsref/jsref-tutorial.html" target="_top">JavaScript 参考手册</a></li>
                                <li><a href="/jsref/jsref-tutorial.html" target="_top">HTML DOM 参考手册</a></li>
                                <li><a href="/jquery/jquery-ref-selectors.html" target="_top">jQuery 参考手册</a></li>
                                <li><a href="/jquerymobile/jquerymobile-ref-data.html" target="_top">jQuery Mobile 参考手册</a></li>
                                <li><a href="/linux/linux-command-manual.html">Linux 命令大全</a></li>
                                <li><a href="/php/php-ref-array.html" target="_top">PHP 参考手册</a></li>
                                <li><a href="/sql/sql-quickref.html" target="_top">SQL 参考手册</a></li>
                                <li><a href="/asp/asp-ref-response.html" target="_top">ASP 参考手册</a></li>
                                <li><a href="/ado/ado-command.html" target="_top">ADO 参考手册</a></li>
                                <li><a href="/vbscript/vbscript-ref-functions.html" target="_top">VBScript 参考手册</a></li>
                                <li><a href="/googleAPI/google-maps-ref.html">Google Maps 参考手册</a></li>
                                <li><a href="/aspnet/webpages-ref-classes.html" target="_top">Razor 参考手册</a></li>
                                <li><a href="/aspnet/aspnet-ref-htmlcontrols.html" target="_top">.NET 参考手册</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">测验/考试</a>
                            <ul>
                                <li><a href="/quiz/html-quiz.html" target="_top" title="HTML 测验">HTML 测验</a></li>
                                <li><a href="/quiz/html5-quiz.html" target="_top" title="HTML5 测验">HTML5 测验</a></li>
                                <li><a href="/quiz/xhtml-quiz.html" target="_top" title="XHTML 测验">XHTML 测验</a></li>
                                <li><a href="/quiz/css-quiz.html" target="_top" title="CSS 测验">CSS 测验</a></li>
                                <li><a href="/quiz/javascript-quiz.html" target="_top" title="JavaScript 测验">JavaScript 测验</a></li>
                                <li><a href="/quiz/jquery-quiz.html" target="_top" title="jQuery 测验">jQuery 测验</a></li>
                                <li><a href="/quiz/xml-quiz.html" target="_top" title="XML 测验">XML 测验</a></li>
                                <li><a href="/quiz/asp-quiz.html" target="_top" title="ASP 测验">ASP 测验</a></li>
                                <li><a href="/quiz/php-quiz.html" target="_top" title="PHP 测验">PHP 测验</a></li>
                                <li><a href="/quiz/sql-quiz.html" target="_top" title="SQL 测验">SQL 测验</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:void(0);">开发工具</a>
                            <ul>
                                <li><a href="/eclipse/index.html" target="_top" title="Eclipse">Eclipse 教程</a></li>
                                <li><a href="/firebug/index.html" target="_top" target="_top" title="Firebug">Firebug 教程</a></li>
                                <li><a href="/css-radius" target="_top" target="_top" title="Firebug">前端工具集</a></li>
                            </ul>
                        </li>
                </ul>
            </div>
        </div>
        <div style="margin-left:5px;"><h2 style="color:#67ad03">关注微信下载离线手册</h2> <img src="/assets/images/qrcode.jpg" width="150" height="150" alt="bootwiki移动版"/> </a> <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=ba72923f64a77a185f18b4a7ca6b8fbe7ba6da842c321bd9e9282d4bd62df4b7" id="qqhref"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="bootwiki" title="bootwiki"></a><br>(群号：<span id="qqid">472910771</span>) </div>
        <div class="wideSkyscraper"><script type="text/javascript" language="javascript">G160x600();</script></div>
    </div>

    <div class="space"></div>
<div id="navfoot"><a href="/jquery/index.html" target="_self">jQuery教程</a> | <a href="/course/photoshop">Photoshop教程</a> | <a href="/course/word" target="_blank">Word教程</a> | <a href="/course/powerpoint" target="_self">PPT教程</a> | <a href="/course/sketch">Sketch草图大师</a> | <a href="/course/maya" target="_blank">Maya教程</a> | <a href="/eyuyan/index.html" target="_blank">易语言教程</a> | <a href="/course/coreldraw" target="_blank">CorelDraw教程</a> | <a href="/course/aspnet" target="_self">ASP.NET</a> | <a href="/redis/index.html">Redis数据库</a> | <a href="/intellijidea/index.html" target="_blank">IntelliJ IDEA教程</a> | <a href="/pycharm/" target="_blank">PyCharm</a> | <a href="/linux/index.html" target="_blank">Linux自学</a> | <a href="/matlab/index.html" target="_blank">Matlab教程</a> | <a href="/" target="_blank">菜鸟教程</a></div>
<div id="footer">
    <p class="fl">Copyright © 2008-2018 | <a href="/">Bootwiki中文网</a> | <a href="https://beian.miit.gov.cn" target="_blank">鲁ICP备19015215号-2</a></p>
    <p class="fr"><a href="/about/index.html#about" rel="nofollow">关于我们</a> | <a href="/about/contact.html#contact" rel="nofollow">联系我们</a> | <a href="/about/law.html#law" rel="nofollow">免责声明</a> | <a href="/about/sitemap.html#map" rel="nofollow">网站地图</a> | Powered by <a href="http://www.bootweb.cn/" rel="nofollow" target="_blank">青岛博维网络有限公司</a>
</div>
<div class="space"></div>



    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"100"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

    <script>
	$(window).load(function(){
     	    $("pre").addClass("prettyprint");
            //prettyPrint();
	})
        $(function(){
            $(".CategoryTree > ul > li").hover(function(){
                $(this).addClass("selected");
                $(this).children("a:eq(0)").addClass("h2-tit");
                $(this).children("ul").show();
            },function(){
                $(this).removeClass("selected");
                $(this).children(".tit").removeClass("h2-tit");
                $(this).children("ul").hide();
            })
        })


    /**/
    function setClipboardText(event){
        event.preventDefault();//阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
        var node = document.createElement('div');
        //对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式
        node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
        //getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择，参数应为零。
        var htmlData = '<div>'
            + node.innerHTML
            + '<br /><br />来源：BootWiki<br />'
            + '链接：https://www.bootwiki/aliminiapp/aliminiapp-xlrw28rq.html<br />'
            + '著作权归作者所有<br />'
            + '商业转载请联系作者获得授权，非商业转载请注明出处<br /><br />'
            + '</div>';
        var textData = window.getSelection().getRangeAt(0)
            + '\n\n来源：BootWiki\n'
            + '链接：https://www.bootwiki/aliminiapp/aliminiapp-xlrw28rq.html\n'
            + '著作权归作者所有\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处\n\n';
        if(event.clipboardData){
            event.clipboardData.setData("text/html", htmlData);
            //setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
            event.clipboardData.setData("text/plain",textData);
        }
        else if(window.clipboardData){ //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
            return window.clipboardData.setData("text", textData);
        }
    };
 
    document.addEventListener('copy',function(e){
        setClipboardText(e);
    });


        function NewWindow(text)
        {
            win=window.open(text,'','top=0,left=0,width=400,height=350');
        }
        var host = window.location.host;
        if (/(iPhone|iPad|iPod|iOS|BlackBerry|IEMobile|Android)/i.test(navigator.userAgent)) {

            if(host == 'www.waitang.com') {
                href = window.location.href;
                href=href.replace(/www.waitang.com/, "m.waitang.com");
                window.location.href=href;
            }
        }
    </script>
    <script src="//www.bootwiki.com/assets/hl/run_prettify.js"></script>
    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</body>
</html>

支付宝小程序介绍

支付宝小程序开放能力

支付宝小程序开发文档

支付宝小程序框架

支付宝小程序组件

支付宝小程序视图容器

支付宝小程序基础内容

支付宝小程序表单组件

支付宝小程序导航

支付宝小程序媒体组件

支付宝小程序画布

支付宝小程序地图

支付宝小程序开放组件

支付宝小程序 API

支付宝小程序界面

支付宝小程序开放接口

支付宝小程序多媒体

支付宝小程序API 设备

支付宝小程序API 蓝牙

支付宝小程序开发工具

支付宝小程序表单组件输入框·Textarea

API

示例

支付宝小程序介绍

支付宝小程序 开放能力

支付宝小程序开发文档

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序 视图容器

支付宝小程序 基础内容

支付宝小程序 表单组件

支付宝小程序 导航

支付宝小程序 媒体组件

支付宝小程序 画布

支付宝小程序 地图

支付宝小程序 开放组件

支付宝小程序 API

支付宝小程序 界面

支付宝小程序 开放接口

支付宝小程序 多媒体

支付宝小程序API 设备

支付宝小程序API 蓝牙

支付宝小程序 开发工具

支付宝小程序表单组件 输入框·Textarea

API

示例

支付宝小程序开放能力

支付宝小程序框架

支付宝小程序组件

支付宝小程序视图容器

支付宝小程序基础内容

支付宝小程序表单组件

支付宝小程序导航

支付宝小程序媒体组件

支付宝小程序画布

支付宝小程序地图

支付宝小程序开放组件

支付宝小程序界面

支付宝小程序开放接口

支付宝小程序多媒体

支付宝小程序开发工具

支付宝小程序表单组件输入框·Textarea