模块化封装,兼容seajs
/** * User: c3t * Date: 14-3-25 * Time: 下午4:16 */ define(function (require, exports, module) { return function (jQuery) { (function ($) { var setting = null; $.fn.keywordInput = function (opts) { setting = $.extend({ number: 5, //关键字数量限定 msg: "请输入关键字,通过逗号或者回车确认" }, opts || {}); init(this); this.keyup(inputKeywords); //通过事件委派。对新加入的标签添加事件 $("#keywords-wrap").on("click", ".keyword-shut", function (event) { $(this).parent(".keyword-in").remove(); event.preventDefault(); }); }; function init(input) { $(input).val(setting.msg); $(input).addClass("keyword-input"); $(input).wrap("<div id=‘keyword-container‘></div>").before("<div id=‘keywords-wrap‘></div>"); $(input).focus(function () { $(this).val(""); }); $(input).blur(function () { $(this).val(setting.msg); }); } function inputKeywords(event) { var code = event.keyCode; if (code == 188 || code == 13) { var c = $(this).val(); if(c!="") { if($(".keyword-in").length >=setting.number){ alert("最多只能允许添加"+setting.number+"个关键字"); event.preventDefault(); return false; } //防止关键字重复 var aks = $("input[name=‘aks‘]"); for(var i=0;i<aks.length;i++) { if($(aks[i]).val()==c) { alert("不能添加重复的关键字"); event.preventDefault(); return false; } } var ki = createKeyWord(c); $(‘#keywords-wrap‘).append(ki); $(this).val(""); } } } function createKeyWord(val) { return "<div class=‘keyword-in‘>"+ "<span>"+val+"</span>"+ "<a href=‘#‘ class=‘keyword-shut‘>×</a>"+ "<input type=‘hidden‘ name=‘aks‘ value=‘"+val+"‘/>"+ "</div>"; } })(jQuery); } });
css 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
#keyword-container { border : 1px
solid #bbb ;
width : 300px ;
} input.keyword-input { border : none ;
width : 300px ;
color : #aaa ;
height : 28px ;
} .keyword-in { float : left ;
font-size : 12px ;
margin : 3px ;
background : #3fa7cb ;
color : #fff ;
} .keyword-shut:link, .keyword-shut:visited { color : #fff ;
text-decoration : none ;
} a.keyword-shut:hover { color : #ff0000 ;
} |
页面
<input type="text" id="keyword-input" value=""/>
调用
$("#keyword-input").keywordInput();