微博插入话题的效果实现

axl234

浏览: 261060 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

IE XHTML 浏览器 HTML

<!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>

<body>

<div id="main">
<h1>微博插入话题的效果实现实例页面</h1>
    <div id="body">

        <div id="effect" class="part">
        <h3>效果：</h3>
            <div class="show">
            <div class="demo">
                <textarea id="textarea" class="textarea"></textarea>
                    <p><button id="button">插入话题</button></p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
var oButton = document.getElementById("button"), oTextarea = document.getElementById("textarea");
var TOPIC = "插入话题";
var funGetSelected = function(element) {
if (!window.getSelection) {
  //IE浏览器
  return document.selection.createRange().text;
} else {
  return element.value.substr(element.selectionStart, element.selectionEnd - element.selectionStart);
}
}, funInsertTopic = function(textObj) {
var topic = "#" + 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>

分享到：

HTML支持的乱七八糟形态各异的非主流常用字 ... | 让层显示在FLASH之上

2011-05-12 16:19
浏览 711
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论