WeChat applet component: textarea multi-line input box interpretation and analysis

This article describes in detail the small program components: textarea multi-line input box interpretation and analysis, with a certain reference value, if you are interested, refer to the textarea multi-line input box component description:

Textarea multi-line input box.

The sample code of the textarea multi-line input box is as follows:

The following is the WXML code:

 
  
Placeholder:
  
  
  </View> </pre>
  
The following is the WXSS code:
  
. Content {border: 1px black solid; margin: 10px; font-size: 10pt; padding: 10px;} textarea {border: 1px red solid; margin: auto; width: 100%; height: 3em; margin-top: 5px; padding: 3px;}/* placeholder style */. placeholdText {font-size: 2em ;}
  
Event in the textarea multi-line input box:
  

  
The following is the WXML code ::
  
   
    
Auto-height:
    Bindinput = "when content changes"
    Bindfocus: when the focus is obtained
    Bindblur: triggered when the focus is lost
    </View> event triggering:
    
     
{Log }}
    
   
  
The following is the JS code ::
  
Page ({data: {log: 'Event trigger '}, // bindlinechange: function (e) {var height = e. detail. height; var heightRpx = e. detail. heightRpx; var lineCount = e. detail. lineCount; this. setData ({log: "height =" + height + "| heightRpx =" + heightRpx + "| lineCount =" + lineCount})}, // text loses focus bindblur: function (e) {var value = e. detail. value; this. setData ({log: "bindblur lost change. get textarea value = "+ value})}, // text get focus bindfocus: function (e) {var value = e. detail. value; this. setData ({log: "bindfocus get focus, get textarea value =" + value })}})
  
The following is the WXSS code ::
  
.content{  border:1px black solid;  margin: 10px;  font-size: 10pt;  padding: 10px;}textarea{  border: 1px red solid;  margin: auto;  width:100%;  height: 3em;  margin-top:5px;  padding: 3px;}
  

  
Property parsing:
  
The following is the WXML code:
  
   
   <! -- Placeholder: placeholder, prompting the content of the input box --><! -- Disabled: The Control label is valid or invalid. The value cannot be obtained in the failed status. -->Equivalent<! -- Maxlength: content length limit. the default value is 140. -->Equivalent<! -- Focus: Gets the input focus during initialization (currently not supported by development tools) -->Equivalent<! -- Auto-focus: when the interface has only one textarea, the focus is automatically obtained. -->Equivalent<! -- Auto-height: whether to automatically increase. when auto-height is set, style. height does not take effect. -->Equivalent<! -- ======= Event =========--> <! -- Bindlinechange: when the number of lines in the input box changes, the return parameters are: height, heightRpx, lineCount --><! -- Bindfocus: triggered when the focus is obtained and the input status is available --><! -- Bindblur: triggered when the focus is lost --> </pre>
The above is the mini-program component: textarea multi-line input box to interpret and analyze the details, more please follow the first PHP community other related articles!