textarea

多行输入框

示例

  1. <template>
  2.     <view class="page-demo">
  3.         <text class="title-text" >focus聚焦</text>
  4.         <view class="input-wrap">
  5.             <textarea placeholder="focus聚焦" focus="{{isfocus}}"  c-bind:blur="bindblurevent"></textarea>
  6.         </view>
  7.         <text class="title-text"><text>数据绑定,value:{{inputValue}}</text></text>
  8.         <view class="input-wrap">
  9.             <textarea placeholder="数据绑定" value="" c-bind:input="inputEvent"></textarea>
  10.         </view>
  11.         <text class="title-text"><text>监听input事件,当前事件：{{eventName}}</text></text>
  12.         <view class="input-wrap">
  13.             <textarea placeholder="监听textarea事件"  c-bind:input="testEvent" c-bind:blur="testEvent" c-bind:focus="testEvent" c-bind:confirm="testEvent"></textarea>
  14.         </view>
  15.         <text class="title-text">placeholderColor web端不支持</text>
  16.         <view class="input-wrap">
  17.             <textarea placeholder="placeholderColor web端不支持" placer-holder-color="#ff0000;" ></textarea>
  18.         </view>
  19.         <text class="title-text">自定义样式</text>
  20.         <view class="end-item">
  21.             <textarea placeholder="自定义样式" cstyle="color: #00ff00; border: 1px solid #00f;" ></textarea>
  22.         </view>
  23.     </view>
  24. </template>
  26. <script>
  27. class Texrarea {
  28.   data = {
  29.     isfocus: false,
  30.     inputValue: '',
  31.     eventName: '触发的事件名称'
  32.   }
  33.   computed = {}
  34.   watch = {}
  35.   methods = {
  36.     inputEvent(e) {
  37.       this.inputValue = e.detail.value;
  38.     },
  39.     testEvent(e) {
  40.       this.eventName = e.type
  41.     },
  42.     bindblurevent()  {
  43.       console.log('blur')
  44.       this.isfocus = false;
  45.     }
  46.   }
  47.   mounted(res) {
  48.     setTimeout(() => {
  49.       this.isfocus = true;
  50.     }, 300);
  51.   }
  52. };
  53. export default new Texrarea();
  54. </script>
  55. <style scoped>
  56. .page-demo {
  57.   background: #FAFAFA;
  58.   position: absolute;
  59.   top:0;
  60.   bottom:0;
  61.   left:0;
  62.   right:0;
  63. }
  64. .title-text {
  65.   color: #999;
  66.   margin: 30cpx 20cpx 10cpx;
  67.   display: block;
  68.   font-size: 28cpx;
  69. }
  70. .end-item {
  71.   margin-bottom: 40cpx;
  72.   position: relative;
  73.   border-top: 1px solid #D9D9D9;
  74.   border-bottom: 1px solid #D9D9D9;
  75. }
  76. .input-wrap  {
  77.   position: relative;
  78.   border-top: 1px solid #D9D9D9;
  79.   border-bottom: 1px solid #D9D9D9;
  80. }
  81. </style>
  83. <script cml-type="json">
  84. {
  85.   "base": {}
  86. }
  87. </script>