前言

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

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

準備工作

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

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

標題名稱：微信小程序純文本實現@功能-創(chuàng)新互聯
本文網址：http://chinadenli.net/article26/dojpjg.html

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

廣告

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