fix(SPA): 修复通用输入框输入emoji字符时被算作1个字符的问题 (hack)

issue #506

Author: mutoe

resources/spa/src/components/common/TextareaInput.vue

@@ -1,12 +1,6 @@
 <template>
-  <div
-    :class="{'auto-height': !rows}"
-    class="textarea-wrap"
-  >
-    <div
-      v-if="!rows"
-      class="textarea-shadow c-textarea-input"
-    >
+  <div :class="{'auto-height': !rows}" class="c-textarea-input">
+    <div v-if="!rows" class="textarea-shadow textarea">
       {{ value }}
     </div> <!-- 用于撑起文本框自适应高度 -->
     <textarea
@@ -16,13 +10,10 @@
       :maxlength="maxlength"
       :readonly="readonly"
       :rows="rows ? rows : 1"
-      class="c-textarea-input"
-      @input="$emit('input', $event.target.value)"
+      class="textarea"
+      @input="onInput"
     />
-    <span
-      v-show="maxlength && value.length > warnlength"
-      class="word-length"
-    >
+    <span v-show="maxlength && value.length > warnlength" class="word-length">
       {{ value.length }} / {{ maxlength }}
     </span>
   </div>
@@ -39,39 +30,48 @@ export default {
     placeholder: { type: String, default: '' },
     rows: { type: [Number, String], default: 0 },
   },
+  methods: {
+    onInput ($event) {
+      let content = $event.target.value
+      // 解决 emoji 字符被用于 maxlength 时被算作1个字符的问题（而'😫'.length => 2）
+      this.maxlength && (content = content.substr(0, Number(this.maxlength)))
+      this.$emit('input', content)
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-.textarea-wrap {
+.c-textarea-input {
   position: relative;
   width: 100%;
+  margin-bottom: 40px;
   height: calc(~"100% + 40px");
-  padding-right: 20px;
   align-self: flex-start;
 
-  .textarea-shadow {
-    opacity: 0;
+  .textarea {
+    width: 100%;
     min-height: 100px;
     word-wrap: break-word;
     word-break: break-all;
+    font-size: inherit;
+    text-align: inherit;
+    line-height: inherit;
+  }
+
+  .textarea-shadow {
+    opacity: 0;
   }
 
   textarea {
     position: absolute;
     top: 0;
     display: block;
-    font-size: 30px;
-    padding-bottom: 28px;
-    width: calc(~"100% - 20px");
     height: 100%;
     overflow: hidden;
     resize: none;
     outline: none;
-    min-height: 100px;
     background-color: transparent;
-    word-wrap: break-word;
-    word-break: break-all;
 
     &[readonly] {
       color: #999;
@@ -80,6 +80,9 @@ export default {
   }
 
   .word-length {
+    position: absolute;
+    bottom: -34px;
+    right: 10px;
     display: block;
     font-size: 22px;
     text-align: right;

resources/spa/src/components/form/FormInputItem.vue

@@ -97,10 +97,10 @@ export default {
 
 .c-form-textarea-item {
   height: auto !important;
+  padding: 28px 20px;
 
   > label {
     align-self: flex-start;
-    padding-top: 28px;
   }
 
   + .c-form-item {

resources/spa/src/page/UserInfo.vue

@@ -7,7 +7,7 @@
         <a
           v-else
           :class="{ disabled }"
-          class="m-send-btn"
+          class="submit-btn"
           @click.prevent="handleOk"
         >
           完成
@@ -229,45 +229,18 @@ export default {
 
 <style lang="less" scoped>
 .p-user-info {
-  main {
-    background-color: #fff;
-  }
-
-  input[type="text"] {
-    height: 100%;
-    font-size: 28px;
-    line-height: normal;
-    vertical-align: middle;
-  }
-
-  textarea {
-    font-size: inherit;
-    font-family: inherit;
-    line-height: inherit;
-    background-color: transparent;
-    outline: 0;
-    border: 0;
-    resize: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-appearance: none !important;
-    -moz-appearance: none !important;
-  }
-
-  .m-avatar-box {
-    margin-right: 35px;
-  }
-
-  .m-send-btn {
+  .submit-btn {
     color: @primary;
 
     &.disabled {
       color: @gray;
     }
   }
 
+  main {
+    background-color: #fff;
+  }
+
   .m-entry-append {
     margin-right: 20px;
   }
@@ -302,9 +275,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.c-textarea-input {
-  padding-top: 28px;
-}
-</style>

resources/spa/src/page/post/PostImage.vue

@@ -25,14 +25,15 @@
     </CommonHeader>
 
     <main>
-      <TextareaInput
-        v-model="contentText"
-        :rows="11"
-        :maxlength="255"
-        :warnlength="200"
-        placeholder="输入要说的话，图文结合更精彩哦"
-        class="textarea-input"
-      />
+      <div class="content-wrap">
+        <TextareaInput
+          v-model="contentText"
+          :rows="11"
+          :maxlength="255"
+          :warnlength="200"
+          placeholder="输入要说的话，图文结合更精彩哦"
+        />
+      </div>
       <ImageList :edit="pinned" style="padding: 0 .3rem .3rem" />
     </main>
 
@@ -143,8 +144,8 @@ export default {
   background-color: #fff;
 
   main {
-    .textarea-input {
-      padding-left: 20px;
+    .content-wrap {
+      padding: 20px;
     }
   }
 

resources/spa/src/page/post/PostNews.vue

@@ -111,7 +111,6 @@
             <div class="m-box m-flex-grow1 m-flex-shrink1 m-aln-center m-justify-end">
               <TextareaInput
                 v-model="news.subject"
-                class="textarea-input"
                 maxlength="200"
                 warnlength="150"
                 placeholder="请输入摘要信息，最多200字"
@@ -510,11 +509,13 @@ export default {
   .m-post-news-row {
     font-size: 30px;
     padding: 40px 30px;
+
     .m-entry-append {
       margin-left: 10px;
     }
     &-label {
-      flex: 0 0 auto;
+      flex: none;
+      align-self: flex-start;
       width: 150px;
     }
     input {
@@ -523,23 +524,14 @@ export default {
       line-height: 30px;
       font-size: 28px;
     }
+
+    .c-textarea-input {
+      text-align: right;
+    }
   }
 
   .placeholder {
     color: #ccc;
   }
 }
 </style>
-
-<style lang="less">
-.p-post-news {
-  .textarea-input {
-    padding-right: 0;
-
-    textarea {
-      text-align: right;
-      width: 100%;
-    }
-  }
-}
-</style>

resources/spa/src/page/post/PostText.vue

@@ -24,13 +24,12 @@
     </CommonHeader>
 
     <main>
-      <div style="height: 100%;">
+      <div class="content-wrap">
         <TextareaInput
           v-model="contentText"
           :maxlength="255"
           :warnlength="200"
           :rows="11"
-          class="textarea-input"
         />
       </div>
     </main>
@@ -163,9 +162,8 @@ export default {
     flex: auto;
     padding-top: 90px;
 
-    .textarea-input {
-      padding-top: 20px;
-      padding-left: 20px;
+    .content-wrap {
+      padding: 20px;
     }
   }
 

resources/spa/src/page/profile/Certificate.vue

@@ -386,8 +386,12 @@ export default {
         }
       }
 
-      .m-input input {
-        text-align: right;
+      .m-input {
+        padding: 0;
+
+        input {
+          text-align: right;
+        }
       }
 
       &.auto-height {
@@ -397,10 +401,10 @@ export default {
         padding-top: 0.4rem;
         padding-bottom: 0.4rem;
 
-        textarea {
-          width: 100%;
+        .c-textarea-input {
+          text-align: right;
+          font-size: 28px;
           line-height: 1.4;
-          font-size: 0.28rem;
         }
       }
     }
@@ -416,17 +420,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.p-profile-certificate {
-  .textarea-wrap {
-    padding-right: 0;
-
-    .c-textarea-input {
-      text-align: right;
-      width: 100%;
-      font-size: 28px;
-    }
-  }
-}
-</style>