实现简易版@功能

来源：互联网发布：java init和cinit 编辑：程序博客网时间：2024/05/21 10:22

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

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

1 0