ios上 textarea中的文字不能左对齐（有一点空隙）当有t

问题： ios上 textarea中的文字不能左对齐（有一点空隙）当有title时对比比较明显

image.png

以textarea为例阐述解决方法

html

<div class="askleave-cont">
  <p class="title">留言内容</p>
  <p ref="askleave-body" @click="handleTextarea()" class="askleave-body">
    <textarea id="formText" v-model="askleaveInfo.body" @focus="handleFocus()" @blur="handleBlur()" ref="textarea" maxlength="120"></textarea>
    <span @click="handleTextarea()" v-show="isText" class="placeholder">请输入4-120字的留言内容，如：小朋友今天身体不适，需要请假1天，希望老师知晓</span>
  </p>
</div>

css

 .askleave-cont {
    width:100%;
    background:#fff;
    padding: 0.34rem 0.3rem 0;
    box-sizing:border-box;
  }
  .main .title{
    width:100%;
    height:0.32rem;
    line-height:0.32rem;
    font-size:0.28rem;
    color:#666;
    margin-bottom:0.18rem;
  }
  .askleave-body{
    width: 100%;
    position:relative;
    height:1.36rem;
    font-size:0;
  }
  .askleave-body textarea{
    width:100%;
    height:1.36rem;
    line-height:0.38rem;
    font-size:0.28rem;
    color:#333;
    position: absolute;
    top: 0;
    left: 0;
    cursor:pointer;
    /*去除默认样式*/
    outline: none;
    resize: none;
    border: none;
    padding:0px!important;
  }
  .askleave-body .placeholder{
    display:block;
    width: 100%;
    line-height:0.38rem;
    color: #c1c1c1;
    font-size: 0.28rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    cursor:pointer;
  }

js

let observe
if (window.attachEvent) {
  observe = function (element, event, handler) {
    element.attachEvent('on' + event, handler)
  }
} else {
  observe = function (element, event, handler) {
    element.addEventListener(event, handler, false)
  }
}
export default {
  mounted () {
  // textarea 高度动态增加
    this.initWatchTextarea()
  },
  data () {
    return {
      askleaveInfo: {
        pm_type_id: 0,
        body: '',
        started_at: '',
        ended_at: '',
        reviewers: []
      },
      isText: true,
    }
  },
  methods: {
    handleTextarea () {
      this.$refs.textarea.focus()
      this.isText = false
    },
    handleFocus () {
      let text = document.getElementById('formText')
      let bodyEle = this.$refs['askleave-body']
      let height = text.scrollHeight + 'px'
      this.isText = false
      if (this.isIOS) {
        bodyEle.style = `height:${height};`
        this.$refs.textarea.style = `left:-3px;width:calc(100vw - 0.54rem);height:${height};`
      }
    },
    handleBlur () {
      let text = document.getElementById('formText')
      let height = text.scrollHeight + 'px'
      if (this.askleaveInfo.body.length <= 0) {
        this.isText = true
        if (this.isIOS) {
          this.$refs.textarea.style = ''
        }
      }
      if (this.askleaveInfo.body.length > 0 && this.askleaveInfo.body.length < 4) {
        this.$utils.showMessage('留言内容至少输入4个字')
      }
      if (this.isIOS) {
        window.scroll(0, 0)
      }
    },
    initWatchTextarea () {
      let self = this
      let text = document.getElementById('formText')
      let bodyEle = this.$refs['askleave-body']
      function resize () {
        text.style.height = '1.36rem'
        if (self.handleAreaHeight) {
          text.style.height = text.scrollHeight + 'px'
          bodyEle.style.height = text.scrollHeight + 'px'
        } else {
          setTimeout(() => {
            text.style.height = text.scrollHeight + 'px'
            bodyEle.style.height = text.scrollHeight + 'px'
            self.handleAreaHeight = true
          }, 500)
        }
      }
      /* 0-timeout to get the already changed text */
      function delayedResize () {
        window.setTimeout(resize, 0)
      }
      observe(text, 'change', delayedResize)
      observe(text, 'cut', delayedResize)
      observe(text, 'paste', delayedResize)
      observe(text, 'drop', delayedResize)
      observe(text, 'keydown', delayedResize)

      // text.focus() // 当进入页面就聚焦时有用
      // text.select() /// 当进入页面就聚焦时有用
      resize()
    }
  }
}

解决问题的依据：

1、当聚焦时textarea定位想做偏移3-4px(右侧空隙可能会大)
2、因为textarea是定位的 高度是自适应增加的那么textarea父级的高度也需自适应增加