实现简易版@功能

89 阅读 0 评论 59 点赞

我是靠谱客的博主淡然发卡，最近开发中收集的这篇文章主要介绍实现简易版@功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在网上看到很多个@功能的小程序，便自己做一个简易版，权当学习（我还是学生），大神路过也可以指点一下迷津

原理：很简单，在输入框按下@的时候，动态生成一个div（比如人物列表），点击人物，人物名字会续加到输入框中，div（人物列表移除）。

其中的一个比较纠结的是@是两种方式按下，分别是英文和中文的shift+2，在此时用keydown，keyup，keypress时，就会比较麻烦，

比如@是两个键按下的（shift+2），keydown会触发两次事件，keypress还好，但是不能监听第一次输入框的输入，所以决定用监听输入框的方法。

第一步：建立personlist.xml文件

 <?xml version="1.0" encoding="utf-8"?>
<person>
<friend>小明1</friend>
<friend>小明2</friend>
<friend>小明3</friend>
<friend>小明4</friend>
<friend>小明5</friend>
<friend>小明6</friend>
</person>

第二步：创建html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>@功能简易版</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<style type="text/css">
ul {
margin-top: 0px;
padding-left: 0px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
li:hover {
background-color: darkgray;
}
.friend {
width: 80px;
height: 125px;
border: 1px solid #A9A9A9;
padding: 0px;
margin: 0px;
}
</style>
<body>
<h4>测试火狐可以兼容</h4>
<div name="div1">
<input type="text" name="intext" /><input type="button" value="点击" />
</div>
</body>
<script>
$(function() {
//实时监听input的输入，兼容性写法
$("input[name='intext']").bind("input propertychange", function(event) {
var a = $(this).val();
var b = a.substring(a.length - 1);
if(b == "@") {
//判断输入的每一个字符，但是没判断退格的情况
$.ajax({
type: "get",
url: "xml/personlist.xml",//xml文件的路径
async: false,
dataType: "xml",
success: function(data) {
var friends = data.getElementsByTagName("friend");
var a="<div class='friend'><ul>";
for(var i=0;i<friends.length;i++){
a+="<li><div>"+friends[i].innerHTML+"</div></li>";
}
a+="</ul></div>";
$("div.friend").remove();
$("div[name='div1']").append(a);
$("li div").bind("click", function(event) { //点击人物，添加人物名字到输入框
var a = $("input[name='intext']").val() + $(this).text();
$("input[name='intext']").val(a);
$("div.friend").remove();
});
}
});
}
});
});
</script>
</html>