在可内容div中使用keyup事件将文本替换为图像
在可内容div中使用keyup事件将文本替换为图像
提问于 2017-06-18 20:54:19
我正在做一个contenteditable div。我想将笑脸代码替换为按键/按键事件上的笑脸图像。我已经理解了问题Replace smiley codes to images的标记回答代码，用于将笑脸代码替换为图像。
因此，我尝试修改它来处理keyup/keydown事件，但是，它不起作用。下面是修改后的代码片段，并回答了其中一个问题。
var emoticons = {
':-)' : 'chair.gif',
':)' : 'cheers1.gif',
':D' : 'clapping.gif',
':-|' : 'dance.gif'
};
var url = "http://digitalsetups.com/emoji/";
var patterns = [];
var metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;
// build a regex pattern for each defined property
for (var i in emoticons) {
if (emoticons.hasOwnProperty(i)){ // escape metacharacters
patterns.push('('+i.replace(metachars, "\\$&")+')');
}
}
// Building Regex Expression
var regex = new RegExp(patterns.join('|'),'g');
// My modification starts here to replace smiley code to image on keyup/keydown events
$(document).ready(function(){
$("#chatMessage").keyup(function(){
// var start = this.selectionStart;
$("#chatMessage").html($("#chatMessage").html().replace(regex,
function (match) {
return typeof emoticons[match] != 'undefined' ?
'<img src="'+url+emoticons[match]+'"/>' :
match;
}));
// this.selectionEnd = start;
});
});#chatMessage {
max-height: 20px;
max-width: 400px;
overflow: auto;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<div id="chatMessage" contenteditable>This is contenteditable div. Press space to change :) into image. Or :-) into another image.</div>
</body>
</html>
更新：
- 我已经更新了JQuery代码。在
val()定义中将keyup function()更改为html()。当我更改它时，每次我写一个字符时，代码就会改变为图像，但是光标会移动到行的开头。 - 我尝试过
selectionStart和selectionEnd的解决方案(我在代码中对它们进行了注释)。什么都没发生。另外，如果我指定开始位置为selectionEnd，结束位置为selectionStart，则光标工作，但笑脸代码不会更改。
回答 2
Stack Overflow用户
发布于 2017-06-18 21:00:25
.val()不是用于此的适当方法-您希望获取和设置元素的innerHTML，所以使用jQuery的.html()方法。
Stack Overflow用户
发布于 2017-06-19 07:15:59
这是更有效的版本，对所有内容编辑器使用，特别是如果您的内容是聊天室，因为有时用户不只是键盘上。
var emoticons = {
':-)' : 'chair.gif',
':)' : 'cheers1.gif',
':D' : 'clapping.gif',
':-|' : 'dance.gif'
};
var url = "http://digitalsetups.com/emoji/";
var patterns = [];
var metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g;
// build a regex pattern for each defined property
for (var i in emoticons) {
if (emoticons.hasOwnProperty(i)){ // escape metacharacters
patterns.push('('+i.replace(metachars, "\\$&")+')');
}
}
// Building Regex Expression
var regex = new RegExp(patterns.join('|'),'g');
// My modification starts here to replace smiley code to image on keyup/keydown events
$(function(){
$("#chatMessage").on('blur keyup paste input', function(){
// var start = this.selectionStart;
$("#chatMessage").html($("#chatMessage").html().replace(regex,
function (match) {
return typeof emoticons[match] != 'undefined' ?
'<img src="'+url+emoticons[match]+'"/>' :
match;
}));
// this.selectionEnd = start;
});
});#chatMessage {
max-height: 20px;
max-width: 400px;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="chatMessage" contenteditable>This is contenteditable div. Press space to change :) into image. Or :-) into another image.</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44619453
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号