微博插入话题的效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.textarea{width:60%; height:100px; padding:3px; font-size:1em;}
</style>
</head>
<body>
<div id="main">
?<h1>微博插入话题的效果实现实例页面</h1>
??? <div id="body">
??? ?
??????? <div id="effect" + TOPIC + "#", value = textObj.value, index = value.indexOf(topic);
?if (index === -1) {
??//匹配
??funTextAsTopic(textObj, topic);
?}
?value = textObj.value;
?index = value.indexOf(topic);
?if (textObj.createTextRange) {
??var range = textObj.createTextRange();
??????? range.moveEnd("character", -1 * value.length)??????????
??????? range.moveEnd("character", index + 5);
??????? range.moveStart("character", index + 1);
??????? range.select();?
?} else {
??textObj.setSelectionRange(index + 1, index + 5);
??????? textObj.focus();
?}
}, funTextAsTopic = function(textObj, textFeildValue) {
?textObj.focus();
?if (textObj.createTextRange) {
??var caretPos = document.selection.createRange().duplicate();
??document.selection.empty();
??caretPos.text = textFeildValue;
?} else if (textObj.setSelectionRange) {
??var rangeStart = textObj.selectionStart;
??var rangeEnd = textObj.selectionEnd;
??var tempStr1 = textObj.value.substring(0, rangeStart);
??var tempStr2 = textObj.value.substring(rangeEnd);
??textObj.value = tempStr1 + textFeildValue + tempStr2;
??textObj.blur();
?}
};
oButton.onclick = function() {
?var textSelection = funGetSelected(oTextarea);
?if (!textSelection || textSelection === TOPIC) {
??//没有文字选中，光标处插入
??funInsertTopic(oTextarea);?
?} else {
??funTextAsTopic(oTextarea, "#" + textSelection + "#");
?}
};
</script>
</body>
</html>
