iT邦幫忙

1

如何利用javascript完成輸入指定字符便觸發功能

例如FB或者line的標記功能,
輸入"@"就會出現可標記的人,
原本的想法是利用onkeyup()觸發後,
去檢查字串的最後有無"@",
但如此一來如果想從字串中間標記就會沒辦法,
請問有沒有辦法去檢查最新輸入的字元為何,
或者有更好的辦法呢?
謝謝

slime iT邦大師 1 級 ‧ 2019-07-03 14:10:24 檢舉
分兩部分處理的話?

0. 使用者每次輸入字元或移動游標, 就觸發檢查.
1. 檢查到輸入的字元是 @ 時, 切換為"可能標記"模式; 檢查到輸入的字元是 enter 或空白 時, 關閉"可能標記"模式
2. 在"可能標記"模式時, 檢查字串符合 @[A-Za-z0-9] , 才開始搜尋.
用jQuery 的 $.keypress() 事件處理
https://api.jquery.com/keypress/

純javascript會要多做很多事,其他framework也多可以達成,參考看看
2
dragonH
iT邦大師 1 級 ‧ 2019-07-03 14:49:19
最佳解答

codepen

第一種方法是

只要 user 輸入 @ 就觸發標記功能

可能會有個使用者列表可以選要標記誰之類的


第二種方法是

user 提交後到後端

再由後端用REGEX檢查是否有使用標記功能

範例輸入

@王大明 @王二明 @王小明 還錢

我記得 fb line的標記 帳號後面也是要空格

不能接著其他文字

這只是給你大概參考一下

相關的安全措施及過濾就先不提了

1
浩瀚星空
iT邦大師 1 級 ‧ 2019-07-03 15:08:29

「原本的想法是利用 onkeyup()觸發後,
去檢查字串的最後有無"@",
但如此一來如果想從字串中間標記就會沒辦法」

我只簡單提點你一下流程,用onkeyup 或其它keyxxx都無所謂
反正能取得事件的which值就好。「@」的keycode是50。

一但偵側到按到@的情況下。就先檢查是否在對應的text區塊內。是的話就先取得focus。
不過我習慣的做法是先暫存目前的內容。再開始跑對應的下拉元件。但確定有選擇後才搭配bbcode重新處理實際內容。

我要發表回答

立即登入回答