实现简易版@功能

2017-01-13 19:10:00来源:CSDN作者:baidu_35205952人点击

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

原理:很简单,在输入框按下@的时候,动态生成一个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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台