微博插入话题的效果实现

最新推荐文章于 2023-02-10 14:39:13 发布

axl234

最新推荐文章于 2023-02-10 14:39:13 发布

阅读量413

点赞数

分类专栏： jquery 文章标签： CSS IE XHTML 浏览器 HTML

本文链接：https://blog.csdn.net/axl234/article/details/83907698

版权

jquery 专栏收录该内容

104 篇文章 0 订阅

订阅专栏

<!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>
<title>微博插入话题的效果实现</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
.textarea {
width:60%;
height:100px;
padding:3px;
font-size:1em;
}
</style>
</head>
<body>
<div id="main">
<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>

axl234

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微博插入话题的效果实现

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;title&
复制链接

扫一扫