我們在qq聊天輸入框，或者其他一些網站的多行文本輸入框中常常會見到這樣一種效果，當我們輸入@符號後，後面會彈出相關的預備輸入內容。
@輸入提示效果圖
我們來看看具體的代碼實現部分：
HTML部分很簡單，就是一個提交按鈕和一個多行文本框，還有需要隱藏顯示的預輸入內容列表。其中id為hackDiv的元素用於確定輸入文本的末尾位置。
HTML部分代碼
css部分實現了將一個文本框和提交按鈕放在瀏覽器窗口居中位置，並將所有涉及的標籤放在了文檔中。可以看到textarea元素和id為hackDiv的元素具有相同的佔位元素，id為hackDiv的元素緊跟在textarea元素後。
css部分代碼
JavaScript部分代碼就會相對複雜一些，首先通過一個兼容函數實現對IE事件綁定的支持，其次建立兩個幫助函數，設置預輸入文本的位置和顯示方式，獲取預輸入文本的輸入位置，最後將@需要傳入的name值寫入文本框，並設置游標的位置為文本結束位置。
用函數實現ie對事件綁定的兼容
兩個輔助函數
調用函數實現完整邏輯
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/268503.html
微信掃一掃 
支付寶掃一掃 