关键字输入效果和样式

发布时间：2020-12-14 00:52:22 所属栏目：百科来源：网络整理

导读：!DOCTYPE html html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ title/title link href="css/bootstrap.min.css" rel="stylesheet" / script src="js/jquery-1.10.2.min.js"/script st

<!DOCTYPE html>

<head>

<style>

.select-tab {

width: 98.8%;

padding: 0 .6%;

background: #fff;

border: 1px solid #e8e8e8;

margin-top: 27px;

border-radius: 2px;

}

.select-tab span {

height: 20px;

line-height: 1.5;

display: inline-block;

padding: 0 12px;

background: #eee;

font-size: 14px;

color: #4285f4;

margin-right: 10px;

cursor: pointer;

}

.select-tab span:first-child {

margin-left: 0;

}

.select-tab em {

display: inline-block;

width: 7px;

height: 7px;

vertical-align: middle;

background: url(images/close_01.png) no-repeat;

margin-left: 6px;

cursor: pointer;

}

.select-tab input {

min-width: 40%;

line-height: 1.3;

padding: 16px 0;

font-size: 14px;

color: #333;

}

.show-select-tab {

padding: 15px 0;

}

.select-tab input {

border: 0 none !important;

outline: none;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

function setBlogTag(inName) {//tab

var tag_value = $(inName).next(".toname").val();

var new_value = $(inName).val();

$(inName).val("");

new_value = $.trim(new_value);

var tag_len = new_value.length;

if(tag_len <= 1) {

$(inName).show();

return false;

}

new_value = new_value.substring(0,tag_len-1);

new_value = new_value.replace(/,/g,'');

new_value = new_value.replace(/，/g,'');

var tag_arr = tag_value == '' ? [] : tag_value.split(",");

for (var i = 0; i < tag_arr.length; i++) {

if(tag_arr[i] == new_value) {

$(inName).show();

return false;

}

var tag_new_value = tag_value == '' ? new_value : (tag_value + ',' + new_value);

$(inName).next(".toname").val(tag_new_value).change();

var tagHtml = "<span>"+new_value+"<em></em></span>";

$(inName).prev(".show-select-tab").append(tagHtml);

tag_num++;

if(tag_num >= 5) {

$(inName).hide();

} else {

$(inName).show();

}

$(function(){

$("body").on("click",'.show-select-tab em',function(){//remove tab

var tag_index=$(this).parent().index();

var tag_value = $(this).parents(".select-tab").find(".toname").val();//alert($(this).parents(".select-tab").find(".toname").val());

var tag_arr = tag_value.split(",");

var tag_new_value = '';

for(var i=0; i< tag_arr.length; i++) {

if(tag_index != i) {

tag_new_value += tag_arr[i] + ",";

}

var new_tag_length = tag_new_value.length;

tag_new_value = tag_new_value.substring(0,new_tag_length - 1);

$(this).parents(".select-tab").find(".toname").val(tag_new_value).change();

$(this).parent().remove();

tag_num--;

$(this).parents(".select-tab").find(".for-tag").show();

})

$('.for-tag').bind('keyup',function(e){//tab click

if(e.keyCode == 188 || e.keyCode == 186 || e.keyCode == 59){

setBlogTag('.for-tag')

}

});

$('.for-tag1').bind('keyup',function(e){//tab click

if(e.keyCode == 188 || e.keyCode == 186 || e.keyCode == 59){

setBlogTag('.for-tag1')

}

});

</script>

</body>

</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

关键字 输入效果和样式

关键字输入效果和样式