Form Component_Detailed explanation of mini program form multi-line input box table

Multi-line input box.

Attribute name	type	default value	illustrate
value	String		Contents of the input box
placeholder	String		Placeholder when the input box is empty
placeholder-style	String		Specify the style of placeholder
placeholder-class	String	textarea-placeholder	Specify the style class of placeholder
disabled	Boolean	false	Whether to disable
maxlength	Number	140	Maximum input length, when set to -1, there is no limit to the maximum length
auto-focus	Boolean	false	Auto focus, pull up the keyboard.
focus	Boolean	false	Get focus
auto-height	Boolean	false	Whether to automatically increase the height. When setting auto-height, style.height does not take effect
fixed	Boolean	false	If the textarea is in a position:fixed area, the specified attribute fixed needs to be displayed as true
cursor-spacing	Number	0	Specify the distance between the cursor and the keyboard, in px. Take the minimum value of the distance between the textarea and the bottom and the distance specified by cursor-spacing as the distance between the cursor and the keyboard
bindfocus	EventHandle		Triggered when the input box is focused, event.detail = {value: value}
bindblur	EventHandle		Triggered when the input box loses focus, event.detail = {value: value}
bindlinechange	EventHandle		Called when the number of lines in the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	EventHandle		When keyboard input occurs, the input event is triggered, event.detail = {value: value}, The return value of the bindinput processing function will not be reflected on the textarea
bindconfirm	EventHandle		When the click is completed, the confirm event is triggered, event.detail = {value: value}

Sample code:

  </view>
<view class="section">
  <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
<view class="section">
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view class="section">
  <textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view><view class="section">  <form bindsubmit="bindFormSubmit">    <textarea placeholder="form 中的 textarea" name="textarea"/>    <button form-type="submit"> 提交 </button>  </form></view></pre><pre class="brush:js;toolbar:false;">//textarea.js
Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap: function() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur: function(e) {
    console.log(e.detail.value)
  },  bindFormSubmit: function(e) {    console.log(e.detail.value.textarea)  }
})</pre><p>Bug & Tip</p><ol class=" list-paddingleft-2"><li><p><code>bug</code> : In WeChat version <code>6.3.30</code>, when <code>textarea</code> is rendered in the list, the position of the newly added <code>textarea</code> during automatic focus is calculated incorrectly. </p></li><li><p><code> tip</code>:<code>textarea</code>’s <code>blur</code> event will be later than the <code>tap</code> event on the page , if you need to get <code>textarea</code> in the click event of <code>button</code>, you can use <code>bindsubmit</code> of <code>form</code>. </p></li><li><p><code>tip</code>: It is not recommended to modify user input on multi-line text, so <code>bindinput</code> of <code>textarea</code> The processing function does not reflect the return value to <code>textarea</code>. </p></li><li><p><code>tip</code>:<code>textarea</code> component is a native component created by the client, and its level is the highest. </p></li><li><p><code>tip</code>: Do not use the <code>textarea</code> component in <code>scroll-view</code>. </p></li><li><p><code>tip</code>:<code>css</code> animation is not valid for the <code>textarea</code> component. </p></li></ol><p>Related articles: </p><p><a href="http://www.php.cn/xiaochengxu-357668.html" target="_self">WeChat mini program component form form interpretation and analysis introduction</a></p><p><a href="http://www.php.cn/xiaochengxu-388990.html" target="_self">WeChat mini program Form component sharing </a></p><p>Related video: </p><p><a href="http://www.php.cn/course/333.html" target="_self">WeChat Mini Program Development Document</a></p></body></html>
<p>The above is the detailed content of Form Component_Detailed explanation of mini program form multi-line input box table. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="WeChat applet development chat conversation component: can be used for online customer service chat conversations" href="http://m.php.cn/faq/407292.html">WeChat applet development chat conversation component: can be used for online customer service chat conversations</a></span><span>Next article：<a class="dBlack" title="WeChat applet development chat conversation component: can be used for online customer service chat conversations" href="http://m.php.cn/faq/407392.html">WeChat applet development chat conversation component: can be used for online customer service chat conversations</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/347763.html" title="WeChat Mini Program Simple DEMO layout, logic, and style exercises" class="aBlack">WeChat Mini Program Simple DEMO layout, logic, and style exercises</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/347764.html" title="Detailed explanation and examples of WeChat applet wx.request (interface calling method)" class="aBlack">Detailed explanation and examples of WeChat applet wx.request (interface calling method)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/347765.html" title="WeChat Mini Program - Detailed explanation of WeChat login, WeChat payment, and template messages" class="aBlack">WeChat Mini Program - Detailed explanation of WeChat login, WeChat payment, and template messages</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/347766.html" title="WeChat applet (application account) simple example application and detailed explanation of the example" class="aBlack">WeChat applet (application account) simple example application and detailed explanation of the example</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/347767.html" title="Detailed explanation of WeChat applet for loop" class="aBlack">Detailed explanation of WeChat applet for loop</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai"  >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

            });
        </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>