您的位置：首页 > 其它

模仿新浪微博“@”好友搜索功能（支持IE和火狐浏览器）-(咋个办呢 zgbn)

2016-02-15 20:22 621 查看

模仿新浪微博“@”好友搜索功能

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<textarea id="textid">
</textarea>
<div>索引关键字：<span id='sokey'></span></div>
</body>
<script type="text/javascript">
var util = {

/**
* 返回在文本域中光标在文字在中的索引位置
* function getPosition(obj)
* @param obj 文本域DOM节点对象，通过document.getElementById()方法得到
* @param e 内置对象不需要入参
* @return int 索引位置
*/
getPosition: function(obj, e) {
var _event = window.event || e;
var result = 0;

if (obj.selectionStart) { //非IE浏览器
result = obj.selectionStart
} else {
//IE
var rng;
if (obj.tagName == "TEXTAREA") {
//如果是文本域
rng = _event.srcElement.createTextRange();
rng.moveToPoint(_event.x, _event.y);
} else {
//输入框
rng = document.selection.createRange();
}
rng.moveStart("character", -_event.srcElement.value.length);
result = rng.text.length;
}
return result;
},
/**
* 返回在文本域中光标左右两边的字符串。
* 次方法依赖于 util.getPosition()方法。
* function getABText(obj)
* @param obj 文本域DOM节点对象，通过document.getElementById()方法得到
* @return array 返回数组，0做左边字符串，1为右边字符串
*/
getABText: function(obj) {
if (obj.value) {
var idx = util.getPosition(obj);
return [obj.value.substr(0, idx), obj.value.substr(idx, obj.value.length)];
}
return null;
},
/**
* 获取文本域中@符号后面的关键字，不能含有空格
* 次方法依赖于 util.getABText()方法。
* function getSourchKey(obj)
* @param obj 文本域DOM节点对象，通过document.getElementById()方法得到
* @param e 内置对象不需要入参
* @return string 关键字
*/
getSourchKey: function(obj, e) {
var _event = window.event || e;
var obj = obj;
var txs = util.getABText(obj);

if (!txs) return null;

var c = _event.keyCode;
var _sp = txs[0].lastIndexOf(' ');
var _ai = txs[0].lastIndexOf('@');

if (_ai > _sp) {
var key = txs[0].substr(txs[0].lastIndexOf('@') + 1, txs[0].length - 1);
return key;
}

return null;
}
}

/**测试函数*/
var txa = document.getElementById('textid');
txa.onmouseup = txa.onkeyup = function(e) {
var key = util.getSourchKey(this, e);
document.getElementById('sokey').innerHTML = key || '';
}
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航