首页 技术JS正文

ios textarea标签的placeholder属性多行时被隐藏

薄洪涛 JS 2020-08-06 195 0 vue

我们使用的textarea 来做了病情描述,但是在ios手机上,当删除输入的文字后,placeholder显示不全,只有键盘收回的时候,才可以显示,如下图


TIM截图20200806215941.pngTIM截图20200817132519.png

导致的原因目前不明确,但是百度上说有可能是以下原因导致:

  1. ios抖动问题

  2. textarea需要重新渲染

然后代码如下:

<group>
    <x-textarea :class="['disease-detail',isEmpty ? 'empty' : '']" v-model.trim="illnessDetail" :placeholder="placeholderDesc" :max="300" @on-change="changeIllness" ref="textareaPlace" id="desc"></x-textarea>
</group>


js:

// 病情描述为空的时候清除
changeIllness (val) {
  let _this = this
  console.log(val)
  if (_this.illnessDetail.trim() === '') {
    console.log('清空存储')
    sessionStorage.setItem('importDetail', '')
    _this.placeholderShowBug()
    return false
  }
  sessionStorage.setItem('importDetail', _this.illnessDetail.trim())
}
// 重新渲染textarea
placeholderShowBug () {
  console.log('主动设置placeholder')
  console.log(this.$refs.textareaPlace.placeholder)
  $('.weui-textarea').attr('placeholder', '请描述疾病名称和症状,患病时间,曾经做过的检查、用药情况,想要获得什么帮助,最少输入10字,最多300')
  $('.weui-textarea').addClass('empty')
  this.isEmpty = true
},

这里有个大坑,需要注意,一开始我就掉进去了,我给x-textarea一个id,为desc,然后重新渲染的时候使用jq选择器写的是$('#desc') ,发现无效,后来查看dom节点,发现如下:

TIM截图20200806220722.png

所以导致重新渲染无效

注:这里改变css样式或者替换placeholder vue都会重新渲染组件,至于我为什么写两遍,我乐意!!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论