背景

Shopping Fan已经开发近一个月，本周进行了最核心功能：“转链”的开发。在Shopping Fan的首页有如下代码进行核心功能的实现。

<view class="search_in">
    <icon type="search" size="20" color="rgba(0,255,0,0.5)" class="magnifier-margin"></icon>
    <input type="text" id="item_URL_text" placeholder="请复制商品地址粘贴到此" />
    <view class="search_btn" bind:tap="handleClickTransLink">转换</view>
</view>

显示效果如下：

测试

期望

• 在点击到输入框时，placeholder的会消失。
• 在长按输入框时，出现“粘贴”，“复制”，“全选”这三个选项，方便将从京东复制过来的商品链接粘贴输入框内，进行转换。

实际

以上两点都未能正确实现。
此时感觉比较麻烦的是第二点：不能出现“粘贴”，“复制”，“全选”。我感觉这应该是输入框的基本功能。在网上找到的资料，很多都是如何禁止这三个选项。由此，可以验证我的感觉是对的。“粘贴”，“复制”，“全选”，是输入框的基本功能。
经过多次测试，发现我输入一个新字符，placeholder就会消失。再将自己输入的字符删除，然后长按输入框，就会出现，“粘贴”，“复制”，“全选”。

推测分析

由于placeholder的存在，影响了长按的显示结果。
那么只需要在input获得焦点时，将placeholder清空是不是就好了？
但是需要注意，如果input失焦时，用户并没有任何输入，input最好将placeholder展示出来，以提示用户。

coding

• placeholder内容，放到js文件中进行动态管理。同时增加一个变量存储输入内容。

  Page({
    data:{
        placeholder: "请复制商品地址粘贴到此",
        itemURL:""
    }
  })

• wxml里给input绑上获得焦点，失去焦点，输入这个事件。

  <input type="text" id="item_URL_text" placeholder="{{placeholder}}" maxlength="-1"
    bindfocus="handleTextareaFocus" 
    bindblur="handleTextareaBlur" 
    bindinput="handleInput"
  />

• 实现handleTextareaFocus，获得焦点时清空placeholder内容。

  handleTextareaFocus: function() {
    this.setData({
      placeholder: "" 
    });
  },

• 实现handleInput，将输入内容存储到itemURL。该方法，主要是为了方便，后续请求转链时的代码简洁。后续考虑删除。

  handleInput: function(event) {
    const value = event.detail.value;
    this.setData({
      itemURL: value
    });
  },

• 实现handleTextareaBlur。如果有输入内容，则不进行处理；如果没有输入内容，重新对placeholder赋值。

  handleTextareaBlur: function(event) {
    const value = event.detail.value;
    if (value === "") {
      this.setData({
        placeholder: "请复制商品地址粘贴到此"
      });
    }
  },

  再次测试

  期望完全实现，功能开发完成。