关键字 输入效果和样式

前端之家收集整理的这篇文章主要介绍了关键字 输入效果和样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_404_1@

<!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>

<style>

.select-tab {

width: 98.8%;

padding: 0 .6%;

background: #fff;

border: 1px solid #e8e8e8;

margin-top: 27px;

border-radius: 2px;

}

@H_404_1@

.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;

}

@H_404_1@

.select-tab span:first-child {

margin-left: 0;

}

@H_404_1@

.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;

}

@H_404_1@

.select-tab input {

min-width: 40%;

line-height: 1.3;

padding: 16px 0;

font-size: 14px;

color: #333;

}

@H_404_1@

.show-select-tab {

padding: 15px 0;

}

.select-tab input {

border: 0 none !important;

outline: none;

}

</style>

</head>

<body>

<div class="select-tab-bg">

<div class="select-tab">

<div class="show-select-tab pull-left">

</div>

<input type="text" id="" class="for-tag" placeholder="请设置标签,最多可设置5个,支持,;间隔" maxlength="20" style="display: inline-block;">

<input name="tag" id="" class="toname" type="hidden" value="">

<div class="clear"></div>

</div>

<p class="publish-msg" style="display: none;"></p>

</div>

@H_404_1@

<div class="select-tab-bg">

<div class="select-tab">

<div class="show-select-tab pull-left">

@H_404_1@

</div>

<input type="text" id="" class="for-tag1" placeholder="请设置标签,最多可设置5个,支持,;间隔" maxlength="20" style="display: inline-block;">

<input name="tag" id="" class="toname" type="hidden" value="">

<div class="clear"></div>

</div>

<p class="publish-msg" style="display: none;"></p>

</div>

<script>

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>

@H_404_1@

</html>

猜你在找的设计模式相关文章