在我的文本框中插入新的表情符號時,我希望顯示爲表情符號圖像而不是表情符號我怎麼能這樣做而不是(':)'
- >把圖像表示它在我的文本框裏面)使我的文本框明白html img標籤
回答
如果你想使用圖像,那麼它會要求你顯着改變你的HTML。您需要在<span>
之類的東西上使用Content Editable功能,而不是常規輸入框。然後,您需要JavaScript代碼來監控按鍵事件,並且每當看到:)
(或其他)時,它都會用相應的<img>
代替代碼。
然而,使用相同的方法,但使用Unicode emoji characters(而不是圖像)的快速和骯髒的解決方案,堅持與您的文本框。這隻會與相應的字體字形平臺上工作 - 雖然普通的笑臉更廣泛的支持 - 但它給你的想法:
HTML:
<input class="emojify" type="text" />
的JavaScript(使用jQuery,使每個人的生活更容易):
$(document).ready(function() {
// Map plaintext smilies to Unicode equivalents
var emoji = {
':)': '\u263a',
':(': '\u2639'
},
// Function to escape regular expressions
reEscape = function(s) {
return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
$('input.emojify').keyup(function() {
var text = $(this).val();
// See if any of our emoji exist in the text and replace with Unicode
$.each(emoji, function(plaintext, unicode) {
text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
});
// Replace text with new values
$(this).val(text);
});
});
這裏有一個的jsfiddle working demo。請注意,每次觸發事件時光標位置都會被重置。我相信你可以以某種方式解決這個問題,但是這段代碼足以說明這個過程。
請問您可以提供更多的表情符unicode。 – user254153 2014-11-25 05:20:31
@ user254153它們都列在我鏈接到的維基百科文章中 – Xophmeister 2014-11-25 10:15:27
單向:不是文本框,而是使用<div contenteditable="true"></div>
。當用戶鍵入時,更改圖像笑臉的發生。提交表單時,您的JavaScript需要將該div的內容轉換爲純文本並將其放入提交的字段中。
- 1. jQuery的+ HTML img標籤
- 2. 如何使用img標籤去除白色邊框
- 3. JavaScript:使html文本明文
- 4. 使用img標籤替換對象標籤UI變空白
- 5. img標籤之後的奇怪空白
- 6. 我不明白什麼是YAML標籤
- 7. django去掉文本中的img標籤
- 8. 從PHP中提取HTML中的所有文本和img標籤。
- 9. 如何使用<amp-img>標籤替換HTML中的<img>標籤?
- 10. img標籤
- 11. 標籤文本忽略HTML標籤
- 12. ASP.NET Img標籤
- 13. 的Html透明文本輸入框
- 14. HTML文本框的值分配給div標籤的標題
- 15. 選擇帶空白文本框的標籤
- 16. 使用美麗的湯提取img alt標籤的文本
- 17. 我需要使用jquery獲取文本框中給出的html標籤
- 18. 的facelet - img標籤
- 19. 刪除所有html標籤,但<img>或<img/>標籤與javascript
- 20. 使用jQuery的標籤搜索標籤文本框
- 21. 從HTML遷移時我無法驗證標籤img的
- 22. 我如何HTML編碼可能有html標籤的文本,而不使用Javascript編碼標籤本身
- 23. 如何使用img標籤
- 24. WPF標籤到文本框
- 25. 文本框重疊標籤
- 26. 標籤,文本框,Asp.net
- 27. Nativescript標籤頁文本框
- 28. 文本框vs標籤
- 29. 灰色striked大綱框img標籤
- 30. 在HTML電子郵件(iOS)中的A標籤內使用IMG標籤
如果你的「文本框」是一個
我會考慮使用現有的富文本編輯器庫,可能已經支持開箱即用。 – millimoose 2013-03-12 11:36:49