Input 框中的 placeholder 属性获取焦点清空

本人在开发一个微信小程序时，遇到如下问题：
input 框获取了焦点，但是 placeholder 属性的值却仍然还在，必须输入任意数据后，该值才会隐藏，这会给用户一种不好的体验效果。

理想效果应为：
input 框一旦获取焦点，就隐藏 placeholder 属性的值。
且失去焦点时，应当根据 input 框内是否有值来决定是否显示 placeholder 属性的值：若 input 框内有值，则不显示 placeholder 属性的值；反之，则显示。

一、在开发微信小程序时的实现方法大致如下：

① wxml 文件中的相关代码

首先在 wxml 文件中为 input 标签设置 onfocus 和 onblur 两个事件，且 placeholder 属性的值从 js 文件中的 data 中获取。

            <input
                type="text"
                placeholder="{{placeholderContent}}"
                οnfοcus="handleOnfocus"
                οnblur="handleOnblur"
            />

补充：
onfocus：事件在对象获得焦点时发生，即当鼠标点击时，触发的事件。
onblur： 事件会在对象失去焦点时发生，即当鼠标点击另一处时所触发的事件。

② js 文件中的相关代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
  	// placeholder 的内容
    placeholderContent: '【粤语】好听到爆的粤语歌单', 
  },
  
  // input 框失去焦点的回调
  handleOnfocus() {
    this.setData({
      placeholderContent: ''
    })
  },
  
  // input 框获得焦点的回调
  handleOnblur(event) {
    if (event.detail.value.trim()) {
      return;
    }
    this.setData({
      placeholderContent: '【粤语】好听到爆的粤语歌单'
    })
  }
})

二、在开发网页时的实现方法大致如下：

① html 文件中的相关代码

只需在标签中加入两段简短的 js 代码即可

	<input type="text" placeholder="请输入内容....."
	 onfocus="this.placeholder=''" 
	 onblur="this.placeholder='请输入内容.....'">

注意：此处未实现“根据 input 框内是否有值来决定是否显示 placeholder 属性的值”这一要求，读者可自行完善。