我有一个 contenteditable div。我想将 keyup/keydown 事件上的笑脸代码替换为笑脸图像。我已经理解了问题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 代码。将
keyup 中的定义。当我更改它时，代码更改为图像 按键后，但每次我光标都会移动到行首 写1个字符。val()更改为html()function() - 我尝试过
selectionStart的解决方案并且selectionEnd(我已在代码中对其进行了注释。) 发生。另外，如果我指定开始位置为selectionEnd 并且结束位置为selectionStart然后，光标可以工作但是 笑脸代码不会改变。
最佳答案
.val() 不是用于此目的的合适方法 - 您想要获取和设置元素的 innerHTML，因此请使用 jQuery 的 。 html() 方法。
关于javascript - 在 contenteditable div 中使用 keyup 事件将文本替换为图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44619453/