微博插入话题的效果实现

axl234 · 发表于 2013-2-7 20:49:02

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

		自动登录	找回密码
密码			立即注册

微博插入话题的效果实现

浏览过的版块