输入框空格变标签

发表于 2017年09月23日
javascript

输入框中输完一个词按一下空格，jq便获取左边内容，然后加入到li里面，通过css让li呈现标签的样式放在输入框里面。

输入完成后，提交表单会得到以空格隔开的一串字符串，然后就可以在后端分割成数组使用了，这个小插件还是我的前端大神同事写的。

自动标签

下面是demo完整代码。

<!DOCTYPE html>
<html>
<head>
<title>空格成标签</title>
</head>
<style>
.input{
padding: 10px;
line-height: 20px;
border-radius: 4px;
border: solid 1px #ddd;
outline: none;
width: 50%;
}
.i_btn{
position: relative;
}
.i_btn_ul{
position: absolute;
left: -30px;
top: -10px;
}
.i_btn_ul li{
float: left;
padding: 5px 8px;
background: rgba(0,0,0,0.1);
margin-left: 5px;
border-radius: 4px;
list-style: none;
}
.tips{
color: gray;
font-size: 12px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<body>
<div class="field i_btn">
<ul class="i_btn_ul"></ul>
<input type="text" value="" class="input i_tags" name="tags" />
<div class="tips">*输完一个按一下空格,最多5个标签</div>
</div>
<script>
function base_btn(sel,i_ul,i_num){
var i_arr
if ($(sel).val()!='') {
var i_arr=$(sel).val().split(' ')
for (var i = 0; i < i_arr.length; i++) {
$(i_ul).append('<li>'+i_arr[i]+'</li>')
}
}else{
i_arr=[]
}
var i_lock=true;
var i_num = i_num||5;
 
$(sel).focus(function(){
if (!i_lock) {
$(sel).val('')
$(sel).css({
 color:'#000'
})
 i_lock=true
}
})
$(sel).keydown(function(event){
if (event.which==32) {
if ($(sel).val().trim()!='') {
var i_li=$('<li>'+$(sel).val()+'</li>')
if ($(i_ul+' li').size()<i_num) {
$(i_ul).append(i_li)
i_arr.push($(sel).val())
$(sel).val('')
$(sel).css({
'padding-left':$(i_ul).width()+10
})
}
else{
alert('喂喂喂，想干嘛？超过限定标签数了！')
}
}
}
if (event.which==8) {
$(i_ul+" li:last").remove();
$(sel).css({
'padding-left':$(i_ul).width()+10
})
i_arr.pop()
}
})
$(sel).blur(function(){
i_lock=false
 $(sel).css({
'padding-left':$(i_ul).width()+10
})

$(sel).css({
 color:'#fff'
})
 var arr1=i_arr;
 $(sel).val(arr1.join(' '))
})
}
 
base_btn('input[name=tags]','.i_btn_ul',5)
</script>
</body>
</html>