前言

烏當(dāng)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

大家肯定對(duì)@功能不陌生，在如今的各大社交軟件中它是一種不可或缺的功能。實(shí)現(xiàn)@人的功能并不復(fù)雜，只需將@人員的id傳給后端，后端下發(fā)通知即可。主要的復(fù)雜點(diǎn)在于一鍵刪除功能與變色功能，web端可以使用現(xiàn)成庫(kù) caret.js 或者 At.js 來(lái)實(shí)現(xiàn)。但筆者需要在小程序中實(shí)現(xiàn)這個(gè)功能，而且在 textarea 標(biāo)簽里實(shí)現(xiàn)，當(dāng)然@人名的變色功能自然而然就砍掉了。

準(zhǔn)備工作

怎么來(lái)實(shí)現(xiàn)一鍵刪除呢？首先想到對(duì)@人名前后用特殊符號(hào)標(biāo)記+正則來(lái)實(shí)現(xiàn)，但結(jié)果不是很理想，擴(kuò)展性也比較差，如果還要匹配話題之類(lèi)的就得多寫(xiě)一套代碼，所以就試著找其他方法解決。發(fā)現(xiàn) wx.getSelectedTextRange 可以獲取文本框聚焦時(shí)的光標(biāo)，這樣就可以將@人員插入文本指定位置。文本框事件 @input 的可以獲取到變化的數(shù)據(jù)與位置，那就可以根據(jù)變化的位置與變化的數(shù)據(jù)來(lái)判斷是否命中@人員，@人員的位置可以通過(guò)計(jì)算獲取。

// bindinput事件返回值 
// value為變化后的值 cursor為變化的位置 keyCode為觸發(fā)的鍵值 
const {value, cursor, keyCode} = event.detail 
// 獲取光標(biāo)位置，聚焦時(shí)生效 
wx.getSelectedTextRange({
  complete: res => {
    console.log('光標(biāo)位置：', res.start, res.end)
  }
})

標(biāo)題名稱(chēng)：微信小程序純文本實(shí)現(xiàn)@功能-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://www.sd-ha.com/article26/dojpjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、定制開(kāi)發(fā)、ChatGPT、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)