jQuery空格键添加a标签js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery空格键添加a标签js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery空格键添加a标签</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.label_box{display:none;width:430px;margin:20px auto;}
.label{height:30px;margin-left:142px;padding:0 10px;}
.label li{float:left;line-height:30px;margin-right:15px;}
</style>
</head>
<body>
<div style="height:50px;"></div>
<div class="label_box">
	<ul class="label"></ul>
</div>
<div style="width:430px;margin: 0 auto;">
	<b style="margin-left:16px;font-size:14px;">(<span style="color:#3366cc;">空格键</span>)添加标签：</b>
	<input style="width:277px;height: 30px;line-height:30px;color:#999;" id="kk"type="text" value="用空格分隔多个标签" onfocus="if(this.value=='用空格分隔多个标签')this.value='';" onblur="if(this.value==''){this.value='用空格分隔多个标签';this.style.color='#999';}" onkeyup="this.style.color='#333';" />
</div>
<script type="text/javascript">
var lablId = -1;

$(function() {
    $("#kk").blur(function() {
        if (isNan(this.value) != false) {
            this.value = '用空格分隔多个标签';
            this.style.color = '#999';
        }
    });
});
$(document).ready(function() {
    $("#kk").keydown(function(event) {
        if (event.keyCode == 32) {
            var str = $("#kk").val();
            if (isNan(str) != true) {
                var li_id = $(".label li:last-child").attr('id');
                if (li_id != undefined) {
                    li_id = li_id.split('_');
                    li_id = parseInt(li_id[1]) + 1;
                } else {
                    li_id = 0;
                }
                $(".label_box").css("display", "block");
                var text = "<li id='li_" + li_id + "'><a href='javascript:;' onclick='deletes(" + li_id + ");' >" + str + "<img src='images/label_03.png' class='label-pic'></a><input type='hidden' name='label[" + li_id + "].name' value='" + str + "'></li>";
                $(".label").append(text);
            }
            $("#kk").val("");
        }
    })
});
function isNan(obj) {
    try {
        return obj == 0 ? true: !obj
    } catch(e) {
        return true;
    }
}


function deletes(id) {
    $("#li_" + id).remove();
    var li_id = $(".label li:last-child").attr('id');
    if (li_id == undefined) {
        $(".label_box").css("display", "none");
    }
}

function addlabl(id) {
    if (lablId == id) {
        return;
    }
    lablId = id;
    var str = $("#add_" + id).text();
    var li_id = $(".label li:last-child").attr('id');
    if (li_id != undefined) {
        li_id = li_id.split('_');
        li_id = parseInt(li_id[1]) + 1;
    } else {
        li_id = 0;
    }
    $(".label_box").css("display", "block");
    var text = "<li id='li_" + li_id + "'><a href='javascript:;' onclick='deletes(" + li_id + ");' >" + str + "<img src='images/label_03.png' class='label-pic'></a><input type='hidden' name='label[" + li_id + "].name' value='" + str + "'></li>";
    $(".label").append(text);
}
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)