模仿新浪微博“@”好友搜索功能
<!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 = {
getPosition: function(obj, e) {
var _event = window.event || e;
var result = 0;
if (obj.selectionStart) {
result = obj.selectionStart
} else {
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;
},
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;
},
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>