经验分享程序开发文档资料数据资源其它资源

jquery表单文本框添加文字标签js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery表单文本框添加文字标签js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图1:

jquery表单文本框添加文字标签js代码

部分效果截图2:

jquery表单文本框添加文字标签js代码

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表单文本框添加文字标签</title>
    <link href="css/all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css" />
</head>
<body style="background:#f9f9f9; ">
    <div style=" width:100%; height:auto; clear:both; margin-top:18px;   ">
        <div style=" width:1022px; height:auto; border:1px solid #dadada; background:#fff;     margin:0 auto;  ">
            <div class="login" style=" width:780px; margin:20px auto; background:#fafafa;   border:1px solid #e0e0e0; border-bottom:6px solid #e0e0e0;    ">
                <div style="width:775px;     ">
                    <form action="" method="get">
                        <table width="775" border="0" cellspacing="0" cellpadding="0" style="float:left;">

                            <tr id="jq124">
                                <td width="219" height="52" align="right" valign="middle"><label class="i_zt"><span style="color:#da4453;">*</span> 主办单位：</label></td>
                                <td height="52" valign="middle">
                                    <div class="i_inp" id="paren" style="  min-height:30px; cursor:pointer; height:auto;     ">
                                        <span class="ui-sortable disp">
                                            <div id="dc" class="sort" style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
                                                <div id="dart" style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
                                            </div>
                                        </span>
                                        <input class="ipva" name="" type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
                                        <div style="clear:both;"></div>
                                    </div>
                                </td>
                                <td width="284">
                                    <table border="0" cellspacing="0" cellpadding="0" class="did">
                                        <tr>
                                            <td height="3"><img src="images/eeee_03.png" alt="" /></td>
                                            <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
                                            <td height="3"><img src="images/eeee_06.png" alt="" /></td>
                                        </tr>
                                        <tr>
                                            <td width="30" valign="top" style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
                                            <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">
                                                输入学科后<span style="color:#da4453;">回车</span>即可添加更多单位
                                            </td>
                                            <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
                                        </tr>
                                        <tr>
                                            <td><img src="images/eeee_11.png" alt="" /></td>
                                            <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
                                            <td><img src="images/eeee_13.png" alt="" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr id="jq124">
                                <td width="219" height="52" align="right" valign="middle"><label class="i_zt">协办单位：</label></td>
                                <td height="52" valign="middle">
                                    <div class="i_inp" id="paren" style="  min-height:30px; cursor:pointer; height:auto;     ">
                                        <span class="ui-sortable disp">
                                            <div id="dc" class="sort" style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
                                                <div id="dart" style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
                                            </div>
                                        </span>
                                        <input class="ipva" name="" type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
                                        <div style="clear:both;"></div>
                                    </div>
                                </td>
                                <td width="284">
                                    <table border="0" cellspacing="0" cellpadding="0" class="did">
                                        <tr>
                                            <td height="3"><img src="images/eeee_03.png" alt="" /></td>
                                            <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
                                            <td height="3"><img src="images/eeee_06.png" alt="" /></td>
                                        </tr>
                                        <tr>
                                            <td width="30" valign="top" style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
                                            <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">回车即可添加<span style=" color:#F00;"></span>更多语言</td>
                                            <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
                                        </tr>
                                        <tr>
                                            <td><img src="images/eeee_11.png" alt="" /></td>
                                            <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
                                            <td><img src="images/eeee_13.png" alt="" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td width="219" height="52" align="right" valign="middle"><label class="i_zt">联办单位：</label></td>
                                <td height="52" valign="middle">
                                    <div class="i_inp" id="paren" style="  min-height:30px; cursor:pointer; height:auto;     ">
                                        <span class="ui-sortable disp">
                                            <div id="dc" class="sort" style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
                                                <div id="dart" style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
                                            </div>
                                        </span>
                                        <input class="ipva" name="" type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
                                        <div style="clear:both;"></div>
                                    </div>
                                </td>
                                <td width="284">
                                    <table border="0" cellspacing="0" cellpadding="0" class="did">
                                        <tr>
                                            <td height="3"><img src="images/eeee_03.png" alt="" /></td>
                                            <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
                                            <td height="3"><img src="images/eeee_06.png" alt="" /></td>
                                        </tr>
                                        <tr>
                                            <td width="30" valign="top" style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
                                            <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">回车即可添加<span style=" color:#F00;"></span>更多单位</td>
                                            <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
                                        </tr>
                                        <tr>
                                            <td><img src="images/eeee_11.png" alt="" /></td>
                                            <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
                                            <td><img src="images/eeee_13.png" alt="" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td width="219" height="52" align="right" valign="middle"><label class="i_zt">赞助单位：</label></td>
                                <td height="52" valign="middle">
                                    <div class="i_inp" id="paren" style="  min-height:30px; cursor:pointer; height:auto;     ">
                                        <span class="ui-sortable disp">
                                            <div id="dc" class="sort" style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
                                                <div id="dart" style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
                                            </div>
                                        </span>
                                        <input class="ipva" name="" type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
                                        <div style="clear:both;"></div>
                                    </div>
                                </td>
                                <td width="284">
                                    <table border="0" cellspacing="0" cellpadding="0" class="did">
                                        <tr>
                                            <td height="3"><img src="images/eeee_03.png" alt="" /></td>
                                            <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
                                            <td height="3"><img src="images/eeee_06.png" alt="" /></td>
                                        </tr>
                                        <tr>
                                            <td width="30" valign="top" style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
                                            <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">回车即可添加<span style=" color:#F00;"></span>更多单位</td>
                                            <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
                                        </tr>
                                        <tr>
                                            <td><img src="images/eeee_11.png" alt="" /></td>
                                            <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
                                            <td><img src="images/eeee_13.png" alt="" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>

                        </table>
                    </form>
                </div>
                <div style="width:775px;     "></div>
                <div style="clear:both;"></div>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>

    <script language="javascript" src="js/jquery-1.2.4.js"></script>
    <script>
        $(function () {
            $(".sanjiao").click(function () { $(this).parent().find("ul").toggle(); })
            $(".iise li ul").hide()

            $(".i_iop").focus(function () { $(this).parent().parent().find("td:eq(2) .did").fadeIn(); })
            $(".i_iop").blur(function () { $(this).parent().parent().find("td:eq(2) .did").fadeOut(1); })

            $(".i_inp .ipva").focus(function () { $(this).parent().parent().parent().find("td:eq(2) .did").fadeIn(); })
            $(".i_inp .ipva").blur(function () { $(this).parent().parent().parent().find("td:eq(2) .did").fadeOut(1); })


        })

        function submitbt() {
            if ($(".i_iop:eq(0)").val() == "") {
                $(".i_iop:eq(0)").focus();
                $(".i_iop:eq(0)").parent().parent().find("td:eq(2) table.did tr:eq(1) td:eq(1)").html("<span style='color:#f00;' >此项内容为必填，不能为空。</span>")
            }
            $(".i_iop:eq(0)").blur(function () { $(this).parent().parent().find("td:eq(2) table.did tr:eq(1) td:eq(1)").html("主标题") })

        }
    </script>
    <script language="javascript" src="js/biankuai.js"></script>
    <script language="javascript" src="js/ui.base.min.js"></script>
    <script language="javascript" src="js/ui.droppable.min.js"></script>
    <script language="javascript" src="js/ui.draggable.min.js"></script>
    <script language="javascript" src="js/ui.sortable.min.js"></script>
    <script language="javascript" src="js/drag.js"></script>
    <script language="javascript" src="js/drag1.js"></script>

    <script language="javascript" src="js/submit.js"></script>
</body>
</html>

JS代码(drag.js):

$(function(){
	var sortableChange = function(e,ui){
	//鎷栨嫿瀛愰」鐩?if(ui.sender){
	var w = ui.element.width();
	ui.placeholder.width(w);
	ui.helper.css("width",ui.element.children().width());
}
}
;
	var sortableUpdate = function(e,ui){
	//鏇存柊妯″潡锛堢敤鎴峰洖鏀剁珯娓呯┖鍚庯級if(ui.element[0].id == "trashcan"){
	emptyTrashCan(ui.item);
}
}
;
	$(function(){
	//寮曠敤涓婚〉闈腑鐨勬墍鏈夊潡var els = ['.disp'];
	var $els = $(els.toString());
	//浣跨敤jQuery鎻掍欢$els.sortable({
	items:'> #dc',//鎷栨嫿瀵硅薄handle:'#dart',//鍙Е鍙戣浜嬩欢鐨勫璞?cursor:'move',//榧犳爣鏍峰紡opacity:0.5,//鎷栨嫿鏃堕€忔槑appendTo:'body',connectWith:els,start:function(e,ui){
	ui.helper.css("width",ui.item.width());
}
,change:sortableChange,update:sortableUpdate//鐢ㄤ簬鍥炴敹绔?}
);
}
);
}
);

JS代码(submit.js):

 function xianshi(){
	var arr = new Array($(".disp:eq(0) span").length) for(var i=0;
	i<$(".disp:eq(0) span").length;
	i++){
	var ise = $(".disp:eq(0) span:eq("+i+") div").text();
	arr[i] = $(".disp:eq(0) span:eq("+i+") div").text()}
vis = arr.join("#") $("#xuke").attr("value",vis)/* ith = $("#xuke").val() alert(ith) */
 var arr1 = new Array($(".disp:eq(1) span").length) for(var i=0;
	i<$(".disp:eq(1) span").length;
	i++){
	var ise = $(".disp:eq(1) span:eq("+i+") div").text();
	arr1[i] = $(".disp:eq(1) span:eq("+i+") div").text()}
vis = arr1.join("#") $("#yuyan").attr("value",vis)/* ith = $("#yuyan").val() alert(ith) */
}

CSS代码(all.css):

@charset "utf-8";/* CSS Document */
body{}
ul.iise{width:190px;display:block;padding-bottom:8px;clear:both;}
ul.iise > li{width:190px;display:block;padding-top:0px;clear:both;border-top:1px solid #c7c7c7;}
ul.iise > li > div.sanjiao{width:38px;cursor:pointer;display:block;float:left;height:40px;line-height:40px;background:url(../images/w3tqaetg.jpg) 29px center no-repeat;font-size:14px;color:#696969;text-indent:34px;}
ul.iise > li > a{width:150px;display:block;float:left;line-height:40px;font-weight:bold;font-size:14px;color:#4f4f4f;}
ul.iise>li>a:hover{background:url(../images/kros_26.jpg) -38px center no-repeat;color:#d03d4c;}
ul.iise>li>ul{width:190px;display:block;clear:both;}
ul.iise>li>ul>li{width:190px;display:block;height:27px;}
ul.iise>li>ul>li>a{width:190px;display:block;line-height:27px;background:url(../images/wqrthryryilt.jpg) 47px center no-repeat;font-size:12px;color:#4f4f4f;text-indent:56px;}
ul.iise>li>ul>li>a:hover{width:190px;display:block;height:27px;background:url(../images/wqrthryryilt.jpg) 47px center no-repeat;font-size:12px;color:#d03d4c;text-indent:56px;}
.i_iop{width:270px;height:14px;line-height:14px;padding:9px 0px;text-indent:8px;background:#f9f9f9;color:#7a7a7a;font-size:14px;border:1px solid #cfcfcf;font-family:瀹嬩綋;text-align:12px;outline:none;}
.i_inp{width:270px;height:32px;line-height:32px;text-indent:8px;background:#f9f9f9;color:#7a7a7a;font-size:14px;border:1px solid #cfcfcf;font-family:瀹嬩綋;text-align:12px;outline:none;}
.i_zt{color:#7a7a7a;font-size:14px;font-family:瀹嬩綋;font-weight:bold;outline:none;}
.did{display:none;}
BODY,H1,H2,H3,H4,H5,H6,HR,P,BLOCKQUOTE,DL,DT,DD,UL,OL,LI,PRE,FORM,FIELDSET,LEGEND,BUTTON,TEXTAREA,LABEL{padding:0px;margin:0px;border:0px;font-size:12px;color:#7b7b7b;}
UL{LIST-STYLE-TYPE:none;LIST-STYLE-IMAGE:none}
OL{LIST-STYLE-TYPE:none;LIST-STYLE-IMAGE:none}
a{TEXT-DECORATION:none;font-size:12px}
div{font-size:12px}
img{border:0 none}
li{list-style-type:none}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
73.98 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
73.98 KB
立即下载
孟莉琬珍
了解
打赏作者 鼓励作者
Html 表单代码1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章