输入框实现实时显示当前输入字符数、隐藏滚动条、单独设置提示文字样式

最新推荐文章于 2024-03-13 16:53:44 发布

霜雪遥

最新推荐文章于 2024-03-13 16:53:44 发布

阅读量588

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Yukinoshita_kino/article/details/112038052

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一. 效果图

未输入文字前：
在这里插入图片描述

输入文字后：
在这里插入图片描述

在这里插入图片描述

注意点： 调整样式的的时候，给textarea设置padding作用不大，因为它只会在手动滚动上下文的时候显示对应的padding效果，在输入文字的时候，输入的文字依然会占位在设置padding的地方，这样可能会导致和显示字数的地方重叠，体验极不好。

二. 代码部分

<template>
  <div class="diary-title">
    <p>日记标题</p>
    <div class="content">
      <textarea name="" id="" maxlength="120" placeholder="特殊的标题有助于唤起美好回忆哦" v-model="diaryTitle"></textarea>
      <span>{{diaryTitle.length}}/120</span>
    </div>
  </div>
</template>
     
<script>
export default {
  data() {
    return {
      diaryTitle: '',
    }
  },
}
</script>

<style lang="scss" scoped>
.diary-title {
   position: relative;
   padding: 19px 16px 0;
   p {
      font-size: 18px;
      color: #333;
      font-weight: bold;
      line-height: 25px;
      text-align: left;
      margin-bottom: 13px;
   }
   .content {
      width: 343px;
      height: 88px;
      padding: 8px 8px 26px;
      background: #fff;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      box-sizing: border-box;
      position: relative;
    }
    textarea {
      width: 327px;
      height: 54px;
      outline: none;
      border: none;
      resize: none;
      padding: 0;
      font-size: 13px;
      color: #333;
      line-height: 18px;
      &::-webkit-input-placeholder {
         font-size: 12px;
         color: #ccc;
         line-height: 17px;
      }
    }
    span {
      font-size: 13px;
      color: #999;
      line-height: 18px;
      position: absolute;
      bottom: 8px;
      right: 8px;
    }
  }
</style>

（完）