無(wú)論是小程序還是平常的Html頁(yè)面，input文本框我們用到的次數(shù)都很多，這一篇文章主要是講關(guān)于小程序中文本框聚焦自動(dòng)拉起輸入鍵盤(pán)的一些使用心得。

為什么我需要聚焦拉起鍵盤(pán)呢？為什么我棄用失焦事件呢？

因?yàn)樵谖业男〕绦蛭恼轮刑峁┝嗽u(píng)論文章的功能，昨天空閑下來(lái)我想將回復(fù)評(píng)論的功能也做一下，我想讓回復(fù)和評(píng)論同時(shí)共用一個(gè)文本框如下圖一，我來(lái)說(shuō)明一下的操作：當(dāng)我們進(jìn)入文章界面的時(shí)候，輸入框模式默認(rèn)是評(píng)論文章的，但是如果我們點(diǎn)擊回復(fù)就會(huì)出現(xiàn)圖二的情況，在文本框出現(xiàn)回復(fù)XXX的評(píng)論，這里有個(gè)過(guò)程：當(dāng)我們點(diǎn)擊回復(fù)的時(shí)候首先讓該文本框聚焦（focus="{{focus}}為true的時(shí)候就會(huì)聚焦），手機(jī)上會(huì)自動(dòng)拉起輸入框，然后在該文本框上賦值"回復(fù)XXX的評(píng)論"。為什么要文本框賦值呢？因?yàn)槲矣?文本內(nèi)容.indexOf("[回復(fù)XXX的評(píng)論:]")==0"來(lái)區(qū)分是回復(fù)文章還是回復(fù)評(píng)論。

在一開(kāi)始的時(shí)候我并非這樣設(shè)計(jì)的，我當(dāng)時(shí)想的是：既然點(diǎn)擊回復(fù)會(huì)聚焦拉起文本框，那么失焦的時(shí)候我在把文本框改為評(píng)論文章吧，但是測(cè)試的時(shí)候就出現(xiàn)了一個(gè)問(wèn)題：我點(diǎn)擊回復(fù)的時(shí)候文本框失焦觸發(fā)的方法在回復(fù)按鈕觸發(fā)之前，也就說(shuō)回復(fù)評(píng)論變成了評(píng)論文章，當(dāng)時(shí)想到的一個(gè)解決辦法是定時(shí)器，讓失焦事件方法體延遲執(zhí)行，雖然達(dá)到了效果，但是也有問(wèn)題：用戶(hù)回復(fù)評(píng)論的時(shí)候，突然不想評(píng)論了，點(diǎn)擊屏幕的其他地方，此時(shí)應(yīng)該立刻按鈕變成發(fā)表，文本框的placeholder變成評(píng)論文章，但是由于延遲所以會(huì)過(guò)一會(huì)才變回去，不太友好。那么怎么辦呢？我就想起了CSDN回復(fù)評(píng)論的功能，我們回復(fù)評(píng)論的時(shí)候會(huì)帶上replyXXX的效果，我就想這個(gè)是不是判斷回復(fù)文章還是回復(fù)評(píng)論的區(qū)別，然后我就這樣做了。我們往下看具體的實(shí)現(xiàn)

那我們來(lái)具體的看代碼：

<input bindinput="wxSearchInput" focus="{{focus}}" value="{{content}}" class="wxSearch-input search-input" placeholder='{{comorfeed}}' cursor-spacing='20'/>
 
<button class="wxSearch-button items" style='display:flex' size="mini" plain="true" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">{{insertorfeed}}</button>

上面就是文本框和按鈕以及綁定的事件，我們主要來(lái)看JS：

首先我們要看一下點(diǎn)擊回復(fù)拉起鍵盤(pán)的事件：代碼里面id為文章評(píng)論的id,name為評(píng)論人的姓名，focus就是聚焦設(shè)為true，insertorfeed是按鈕顯示的值，一開(kāi)始為評(píng)論，點(diǎn)擊回復(fù)之后按鈕變成回復(fù)，placeholder變成回復(fù)評(píng)論，content自動(dòng)加上"[回復(fù)XX的評(píng)論]".

 feedbackCom: function(e) {
  var id = e.currentTarget.dataset.id
  var name = e.currentTarget.dataset.name
  var index = e.currentTarget.dataset.index
  console.log(id + name + index)
  this.setData({
   id: id,
   index: index,
   focus: true,
   insertorfeed: "回復(fù)",
   comorfeed: "回復(fù)評(píng)論",
   content: "[回復(fù)" + name + "評(píng)論]:"
  })
 },

分析完點(diǎn)擊回復(fù)的事件之后，我們看一下文本框輸入的時(shí)候會(huì)觸發(fā)的wxSearchInput方法：這個(gè)方法會(huì)首先setData文本框的值用于渲染，然后判斷this.data.id，它作為是否點(diǎn)擊回復(fù)的第一層判斷，如果this.data.id存在，我們就要判斷content是否含有"[回復(fù)XXX的評(píng)論]:",如果存在就說(shuō)明是回復(fù)評(píng)論而不是文章(我們要主要indexOf==0才算回復(fù)評(píng)論，因?yàn)樗谧钋懊娌艦閠rue，不是含有就為true)。如果不包含說(shuō)明人為的刪除了"[回復(fù)XXX的評(píng)論]:"此時(shí)我們就當(dāng)它要回復(fù)文章了，然后清除有關(guān)回復(fù)的一切數(shù)據(jù)(有個(gè)小問(wèn)題就是，我這里吧內(nèi)容全部清除了，大家可以截取一下字符串，只把[回復(fù)XX的評(píng)論]給去掉)

 wxSearchInput: function(e) {
  this.setData({
   content: e.detail.value
  })
//如果點(diǎn)擊了評(píng)論的回復(fù)，this.data.id就會(huì)有值
  if (this.data.id) {
   console.log("存在點(diǎn)擊回復(fù)")
//判斷content是否含有"[回復(fù)XXX的評(píng)論]:"
   if (this.data.content.indexOf("[回復(fù)" + this.data.comment.commment[this.data.index].userName + "評(píng)論]:") == 0) {
    console.log("確定是回復(fù)評(píng)論" + this.data.comment.commment[this.data.index].userName)
   } else {
    console.log("存在點(diǎn)擊回復(fù),但是刪除了，所以是評(píng)論文章")
    //清楚有關(guān)回復(fù)的一切數(shù)據(jù)
    this.setData({
     id: "",
     content: "",
     comorfeed: "評(píng)論文章",
     insertorfeed: "發(fā)表",
    })
   }
  } else {
   console.log("不存在點(diǎn)擊回復(fù)，直接評(píng)論文章")
  }
 
 },

因?yàn)槲覀冊(cè)谳斎氲臅r(shí)候就做了一系列的判斷，所以當(dāng)我們提交的時(shí)候就非常容易了：首先判斷內(nèi)容是否為空，然后通過(guò)判斷comorfeed來(lái)判定是回復(fù)文章還是回復(fù)評(píng)論。如果是回復(fù)評(píng)論那么我們提交之前應(yīng)該把文本的前綴去掉

/**
  * 用戶(hù)提交內(nèi)容，獲取用戶(hù)信息
  */
 onGotUserInfo: function(e) {
  console.log("xxx1")
  /** 
   * 檢查評(píng)論內(nèi)容是否為空
   */
  if (!this.checkContent(this.data.content)) {
   return;
  }
  /** 
   * 如果用戶(hù)授權(quán)，則能拿到數(shù)據(jù)，否則就是用戶(hù)拒絕授權(quán)，那么提示無(wú)法評(píng)論
   */
  if (e.detail.userInfo) {
   if (this.data.comorfeed == "評(píng)論文章") {
    //發(fā)表評(píng)論
    console.log(this.data.comorfeed)
    allReq.userLogin(e.detail.userInfo.nickName, e.detail.userInfo.avatarUrl, e.detail.userInfo.gender, this.data.content, this.data.artilceId, 0);
   } else {
    console.log("回復(fù)評(píng)論")
    console.log(this.data.id)
    var co = this.data.content.split("[回復(fù)" + this.data.comment.commment[this.data.index].userName + "評(píng)論]:");
    console.log(co)
    allReq.userLogin(e.detail.userInfo.nickName, e.detail.userInfo.avatarUrl, e.detail.userInfo.gender, co[1], this.data.artilceId, this.data.id);
   }
   this.setData({
    content: "",
    id: "",
    comorfeed: "評(píng)論文章",
    insertorfeed: "發(fā)表",
   })
  } else {
   remind.modal("提示", '讓小每認(rèn)識(shí)你之后才能評(píng)論哦')
  }
 },

其實(shí)實(shí)現(xiàn)聚焦不難，有API我們很容易實(shí)現(xiàn)，有點(diǎn)麻煩的是一系列的判斷，因?yàn)榧热挥玫搅司劢鼓敲纯隙ú粏螁沃皇抢疰I盤(pán)那么簡(jiǎn)單你最終要實(shí)現(xiàn)的東西肯定還需要進(jìn)一步的推進(jìn)，此時(shí)到底是用失焦還是想我一樣就需要你分析你的需求了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論