Question

javascript 使表情输入到textarea 里的调用函数，求人帮我解析每行代码的意思

图片在那边就是将表情插进去，
前台页面代码如下：
<textarea name="b_conter" cols="55" rows="5" class="bti2" id="b_conter"></textarea></td>
</tr>
<tr class="bt0">
<td class="bt1">留言表情：</td>
<td colspan="2" class="bt2">
<ul class="qqface">
<li><img onClick="grin('b_conter','[Q0]');" src="./images/q/face0.gif" /></li>
<li><img onClick="grin('b_conter','[Q1]');" src="./images/q/face1.gif" /></li>
<li><img onClick="grin('b_conter','[Q2]');" src="./images/q/face2.gif" /></li>
<li><img onClick="grin('b_conter','[Q3]');" src="./images/q/face3.gif" /></li>
</ul><td/>
调用的是 javascript grin（）自定义函数，函数代码我也贴出。
function grin(tagname,tag) {
var myField;
if (document.getElementById(tagname) && document.getElementById(tagname).type == 'textarea') {
myField = document.getElementById(tagname);
}
else {
return false;
}
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = tag;
myField.focus();
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
myField.value = myField.value.substring(0, startPos) //重0的位置开始截取,startpos 结尾
+ tag
+ myField.value.substring(endPos, myField.value.length);
cursorPos += tag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
}
else {
myField.value += tag;
myField.focus();
}
}

我需要整体的解析，其实这个代码大概的意思我已经知道。
但我想知道他写这个代码思路，分只会给解答最详细者。如果解析很成功，让我完全明白，会加分。
谢谢。

Answer 1

函数grin实现点击某个表情图标，就可以将表情图标翻译成代码并插入到指定的textarea中的鼠标光标停留位置。

具体实现方法：

var myField;
if (...) {
myField = document.getElementById(tagname);
}else {
return false;
}
定义一个局部变量myField，并指向指定的textarea，如果不存在指定的textarea则退出。

if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = tag;
myField.focus();
}
判断是否存在document.selection对象，主要是因为浏览器之间的差异，IE支持document.selection，FF不支持，所以要先判断一下。如果存在，则：
1、焦点转到指定的textarea
2、调用selection对象的createRange方法，该方法可以返回处于激活状态的输入框中选中的文本，如果没有选中任何文本，则自动定位到光标位置，并返回空字符串。表述的可能不太准确，可以搜索一下。
3、将选定的文本替换成表情对象对应的代码，如果没有选中文本，则将表情代码插入到光标位置。
4、焦点转到textarea。

else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
myField.value = myField.value.substring(0,startPos)
+ tag
+ myField.value.substring(endPos, myField.value.length);
cursorPos += tag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
}
如果浏览器不支持selection，则使用selectionStart和selectionEnd对象，从字面可以理解这两个对象是表示选中文本在输入框所有字符串中的起始位置和结束位置，调用subString方法以这两个位置分割输入框中的全部字符串为3个字符串，然后将选中的文本（即中间的字符串，如果没有选中文本则中间的字符串为空）替换成表情代码，最后把光标定位到表情代码的末尾，并且取消选中。

else {
myField.value += tag;
myField.focus();
}
如果浏览器以上两种方法都不支持，则直接把表情代码添加到textarea中所有文本的末尾。

大概就是这么个意思吧。写的好累，楼主别忘了给分哦。