写任何文本后无法插入表情符号
Cannot Insert emoticons after write any text
Textarea 无法预览图像，所以我让它background透明，color透明，并在它后面设置另一个div来预览 textarea 的 val。
现在。如果我在文本区域上写/删除某些内容，它的显示效果很好。但是在文本区域上写入/删除并单击以插入任何表情符号（右侧表情符号窗口，在下面的示例中），它无法插入任何表情符号。请问我的错在哪里？
请帮帮我？
var smileys = {
':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
};
function escapeRegExp(str) {
return str.replace(/['-'[']'/'{'}'(')'*'+'?'.'''^'$'|]/g, "''$&");
}
function smilyMe(msg) {
msg = msg.replace(/(?:'r'n|'r|'n)/g, '<br />');
for (var key in smileys) {
msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]);
}
return msg;
}
$(document).ready(function() {
$(".chat > textarea").bind("keyup", function(e) {
$(".chat > div").html(smilyMe($(".chat > textarea").val()));
});
$('#maintbox').on('keyup',function() {
$(this).css('height','auto');
$(this).css('height',Math.max(this.scrollHeight)+'px');
});
$('#showhide_emobox').click(function(){
$('#emobox').fadeToggle();
$(this).toggleClass('active');
});
$(".embtn").click(function(event){
var prevMsg = $(".chat > textarea").val();
var emotiText = $(event.target).attr("alt");
$(".chat > textarea").html(prevMsg + emotiText);
$(".chat > div").html(smilyMe($(".chat > textarea").val()));
});
$('textarea').elastic();
});#maintbox {
position:relative;
border: 2px solid #ccc;
min-height: 50px;
width: 450;
top:100px;
}
div.chat {
width: 100%;
}
.preview {
max-width: 400px;
font-family:Times New Roman, Times, serif;
font-size:14px;
color:#000000;
position:absolute;
top:0; left:0; z-index:997;
}
div.chat > textarea {
font-family:Times New Roman, Times, serif;
font-size:14px;
margin-left:-2px;
margin-top:-2px;
margin-bottom:2px;
min-height: 50px;
width: 510px;
resize:none;
float:left;
position:absolute; color:transparent;
top:0; left:0; z-index:998; background: transparent;
}
.em {
position:relative;
margin:1px 2px;
float:right;
height:20px;
width:20px;
text-align:center;
}
.em img {
margin-top:1px;
cursor:pointer;
color:white;
display:block;
transition:all 1s ease;
}
#emobox {
background:#fff;
display:none;
position:absolute;
width:200px;
bottom:25px;
left:-176px;
border: 2px solid #ccc;
white-space:nowrap;
}
#emobox img {
float:left;
position:relative;
display:inline-block;
margin:5px 5px;
}<div id="maintbox">
<div class="chat">
<div class="preview"></div>
<textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
</div>
<div align="right"><img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" width="25" alt="" id="uploadMedia" style="padding:2px;cursor:pointer;" />
<div class="em">
<img src="http://simpleicon.com/wp-content/uploads/big-smile-256x256.png" width="25" id="showhide_emobox"/>
<div id="emobox">
<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":)" class="embtn" />
<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":-)" class="embtn" />
<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":D" class="embtn" />
</div>
</div>
</div>
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>html（） 是设置文本区域内容的错误方法。请改用 val（）。
这样做的原因是文本区域从其开始和结束标记之间的文本中获取其初始值。其当前值始终存储在其值属性中。
替换此行
$(".chat > textarea").html(prevMsg + emotiText);
跟
$(".chat > textarea").val(prevMsg + emotiText);
这是完整的代码：
var smileys = {
':)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
':-)': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
':D': '<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" border="0" alt="" />',
};
function escapeRegExp(str) {
return str.replace(/['-'[']'/'{'}'(')'*'+'?'.'''^'$'|]/g, "''$&");
}
function smilyMe(msg) {
msg = msg.replace(/(?:'r'n|'r|'n)/g, '<br />');
for (var key in smileys) {
msg = msg.replace(new RegExp(escapeRegExp(key), "g"), smileys[key]);
}
return msg;
}
$(document).ready(function() {
$(".chat > textarea").bind("keyup", function(e) {
$(".chat > div").html(smilyMe($(".chat > textarea").val()));
});
$('#maintbox').on('keyup',function() {
$(this).css('height','auto');
$(this).css('height',Math.max(this.scrollHeight)+'px');
});
$('#showhide_emobox').click(function(){
$('#emobox').fadeToggle();
$(this).toggleClass('active');
});
$(".embtn").click(function(event){
var prevMsg = $(".chat > textarea").val();
var emotiText = $(event.target).attr("alt");
$(".chat > textarea").val(prevMsg + emotiText);
$(".chat > div").html(smilyMe($(".chat > textarea").val()));
});
$('textarea').elastic();
});#maintbox {
position:relative;
border: 2px solid #ccc;
min-height: 50px;
width: 450;
top:100px;
}
div.chat {
width: 100%;
}
.preview {
max-width: 400px;
font-family:Times New Roman, Times, serif;
font-size:14px;
color:#000000;
position:absolute;
top:0; left:0; z-index:997;
}
div.chat > textarea {
font-family:Times New Roman, Times, serif;
font-size:14px;
margin-left:-2px;
margin-top:-2px;
margin-bottom:2px;
min-height: 50px;
width: 510px;
resize:none;
float:left;
position:absolute; color:transparent;
top:0; left:0; z-index:998; background: transparent;
}
.em {
position:relative;
margin:1px 2px;
float:right;
height:20px;
width:20px;
text-align:center;
}
.em img {
margin-top:1px;
cursor:pointer;
color:white;
display:block;
transition:all 1s ease;
}
#emobox {
background:#fff;
display:none;
position:absolute;
width:200px;
bottom:25px;
left:-176px;
border: 2px solid #ccc;
white-space:nowrap;
}
#emobox img {
float:left;
position:relative;
display:inline-block;
margin:5px 5px;
}<div id="maintbox">
<div class="chat">
<div class="preview"></div>
<textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
</div>
<div align="right"><img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" width="25" alt="" id="uploadMedia" style="padding:2px;cursor:pointer;" />
<div class="em">
<img src="http://simpleicon.com/wp-content/uploads/big-smile-256x256.png" width="25" id="showhide_emobox"/>
<div id="emobox">
<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":)" class="embtn" />
<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":-)" class="embtn" />
<img src="http://www.html5gamedevs.com/public/style_emoticons/default/wacko.png" alt=":D" class="embtn" />
</div>
</div>
</div>
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>相关文章：
- 插入符号到底是什么
- 将插入符号位置移动到ContentEditable<DIV>
- 为更改的输入返回插入符号位置的逻辑
- 内容可编辑DIV单击/插入符号设置
- 在contentEditable元素中居中占位符插入符号
- 获取插入符号相对于行可见起点的位置
- JavaScript 插入符号位置
- 链接内的内容可编辑块，如何防止重定向，但让文本选择插入符号位置更改
- 如何更改文本区域中闪烁的光标/插入符号
- Caret函数没有'如果插入符号在最后一个位置，就不能正常工作
- 如何使用javascript获取&使用字符偏移量设置插入符号位置
- text使用shift键和箭头键时的区域插入符号位置
- Rangy和IE8-在段落末尾的元素后面放置插入符号
- HTML Texeare 插入符号控件使用左、右、下、上、主页和结束虚拟按钮
- 在插入符号位置获取DOM元素
- 单击时获取文本区域中插入符号的位置
- 正则表达式替换为插入符号
- 我可以使用或打开'插入'现代浏览器中使用javascript的插入符号
- 如何在contenteditable中跟踪插入符号/光标
- tinymce丢失插入符号位置
