Form Component_미니 프로그램 형태의 다중 라인 입력 상자 테이블에 대한 자세한 설명

다선 입력 상자.

속성 이름	유형	기본값	지침
가치	문자열		입력 상자의 내용
placeholder	문자열		입력 상자가 비어 있을 때의 자리 표시자
자리 표시자 스타일	문자열		자리표시자 스타일 지정
placeholder-class	문자열	textarea-placeholder	자리표시자의 스타일 클래스를 지정하세요
장애	부울	거짓	비활성화 여부
최대 길이	번호	140	최대 입력 길이, -1로 설정하면 최대 길이에 제한이 없습니다
자동 초점	부울	거짓	자동 초점, 키보드를 당겨보세요.
집중	부울	거짓	집중하세요
자동 높이	부울	거짓	자동으로 높이를 높일 것인지, 자동 높이 설정 시 style.height가 적용되지 않습니다
수정됨	부울	거짓	텍스트 영역이 position:fixed 영역에 있는 경우 지정된 고정 속성이 true로 표시되어야 합니다position:fixed的区域，需要显示指定属性 fixed 为 true
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
bindfocus	EventHandle		输入框聚焦时触发，event.detail = {value: value}
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
bindlinechange	EventHandle		输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
bindinput	EventHandle		当键盘输入时，触发 input 事件，event.detail = {value: value}，bindinput 处理函数的返回值并不会反映到 textarea 上
bindconfirm	EventHandle		点击完成时， 触发 confirm 事件，event.detail = {value: value}

 示例代码：

<!--textarea.wxml-->
<view class="section">
  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</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>

//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)  }
})

Bug & Tip

1. bug: 微信版本6.3.30，textarea在列表渲染时，新增加的textarea在自动聚焦时的位置计算错误。

2.  tip:textarea 的blur事件会晚于页面上的tap事件，如果需要在button的点击事件获取textarea，可以使用form的bindsubmit。

3. tip: 不建议在多行文本上对用户的输入进行修改，所以textarea的bindinput处理函数并不会将返回值反映到textarea上。

4. tip:textarea组件是由客户端创建的原生组件，它的层级是最高的。

5. tip: 请勿在scroll-view中使用textarea组件。

6. tip:css动画对textarea

커서 간격

번호

0

커서와 키보드 사이의 거리를 px 단위로 지정하세요. 텍스트 영역과 하단 사이의 거리와 커서 간격으로 지정된 거리의 최소값을 커서와 키보드 사이의 거리로 가져옵니다

바인드포커스

이벤트핸들

입력 상자에 포커스가 있을 때 트리거됩니다. event.detail = {value: value}🎜 🎜🎜🎜bindblur🎜 🎜이벤트핸들🎜 🎜 🎜 🎜입력 상자가 포커스를 잃을 때 트리거됨, event.detail = {value: value}🎜 🎜🎜🎜bindlinechange🎜 🎜이벤트핸들🎜 🎜 🎜 🎜입력 상자의 줄 수가 변경되면 호출됩니다. event.detail = {height: 0, heightRpx: 0, lineCount: 0}🎜 🎜🎜🎜bindinput🎜 🎜이벤트핸들🎜 🎜 🎜 🎜키보드 입력이 발생하면 입력 이벤트가 발생하고 event.detail = {value: value}이며 bindinput 처리 함수의 반환 값은 텍스트 영역에 반영되지 않습니다🎜 🎜🎜🎜bindconfirm🎜 🎜이벤트핸들🎜 🎜 🎜 🎜클릭이 완료되면 확인 이벤트가 발생됩니다. event.detail = {value: value}🎜 🎜🎜 샘플 코드:🎜rrreeerrreee🎜Bug & Tip🎜

1. 🎜버그: WeChat 버전 6.3.30에서 textarea가 목록에 렌더링될 때 자동 초점 중에 새로 추가된 textarea의 위치는 다음과 같습니다. 잘못 계산되었습니다. 🎜🎜
2. 🎜 팁:textarea의 blur 이벤트는 페이지에서 버튼의 클릭 이벤트에서 textarea를 얻어야 하는 경우 form의 bindsubmit을 사용할 수 있습니다. . 🎜🎜
3. 🎜tip: 여러 줄의 텍스트에 대한 사용자 입력을 수정하는 것은 권장되지 않으므로 textarea의 bindinput 처리 기능 반환 값은 텍스트 영역에 반영되지 않습니다. 🎜🎜
4. 🎜tip:textarea 구성 요소는 클라이언트가 생성한 기본 구성 요소로, 그 수준이 가장 높습니다. 🎜🎜
5. 🎜팁: scroll-view에서 textarea 구성 요소를 사용하지 마세요. 🎜🎜
6. 🎜팁: css 애니메이션은 textarea 구성 요소에 유효하지 않습니다. 🎜🎜🎜🎜관련 기사: 🎜🎜🎜WeChat Mini 프로그램 구성 요소 양식 해석 및 분석 소개🎜🎜🎜🎜WeChat Mini 프로그램 양식 구성 요소 공유 1🎜🎜🎜관련 동영상: 🎜🎜🎜WeChat Mini 프로그램 개발 문서🎜🎜

위 내용은 Form Component_미니 프로그램 형태의 다중 라인 입력 상자 테이블에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!