原生js 實現輸入框emoji表情釋出
摘要：
原文地址在
github地址
emogi 實現思路
頁面首先有一個textarea 輸入框 點擊發布按鈕 還有一個表情圖列表
表情圖列表其實是每一張圖片在代替表情包 在這裡我用了六張圖片代替六個表情包
點選單獨的每個表情包 會把對應得表情包轉有屬...
emogi 實現思路
- 頁面首先有一個textarea 輸入框 點擊發布按鈕 還有一個表情圖列表
- 表情圖列表其實是每一張圖片在代替表情包 在這裡我用了六張圖片代替六個表情包
- 點選單獨的每個表情包 會把對應得表情包轉有屬性 新增到輸入框 例如[跪了]
- 然後點擊發布的時候 進行正則匹配每個表情包屬性 替換成對應得圖片路徑即可
- 在這裡碰到了一個問題，如何保留文字輸入框的換行符空白符，
- 我想過用正則匹配換行符空白符，然後進行替換，後來發現有一個css的屬性特別好用 white-space:pre
我覺得white-space這個css屬性特別好用，以前沒有著重關注過，剛好在這裡用到
- white-space:normal 預設，空白會被瀏覽器忽略 normal表示合併空格，多個相鄰空格合併成一個空格，在原始碼中的換行作為空格處理，只會根據容器的大小進行自動換行。 這裡的空白是值空白字元，包括空格，製表符等空白字元，下面為了行文方便，統一用“空格”代表。
white-space:nowrap不換行
white-space:nowrap和normal一樣，也合併空格，但是不會根據容器大小換行，表示不換行。 white-space:nowrap會導致文字不換行，經常和overflow,text-overflow一起使用 複製程式碼
white-space:pre保留空格不換行
white-space:pre的作用是保持原始碼中的空格，有幾個空格算幾個空格顯示，同時換行只認原始碼中的換行和<br/>標籤。 複製程式碼
white-space:pre-wrap保留空格換行
white-space:pre-wrap的作用是保留空格，並且除了碰到原始碼中的換行和<br/>會換行外，還會自適應容器的邊界進行換行。 white-space:pre-wrap和white-space:pre的區別就是會自適應容器的邊界進行換行。 複製程式碼
white-space:pre-line合併空格換行
white-space:pre-line的作用是合併空格，換行和white-space:pre-wrap一樣，遇到原始碼中的換行和<br/>會換行，碰到容器的邊界也會換 行。 複製程式碼
| white-space屬性 | 原始碼空格 | 原始碼換行 | 換行 | 容器邊界換行 |
|---|---|---|---|---|
| normal | 合併 | 忽略 | 換行 | 換行 |
| nowrap | 合併 | 忽略 | 換行 | 不換行 |
| pre | 保留 | 保留 | 換行 | 不換行 |
| pre-wrap | 保留 | 保留 | 換行 | 換行 |
| pre-line | 合併 | 換行 | 換行 | 換行 |