基于jquery实现表单文本框添加文字标签



78 311 104



特效描述:基于jquery实现 表单文本框 添加文字标签,基于jquery实现表单文本框添加文字标签

代码结构

1. 引入CSS

<link href="css/all.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>
<link href="css/all.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>

2. 引入JS

<script language="javascript" src="js/jquery-1.2.4.js"></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>
<script language="javascript" src="js/jquery-1.2.4.js"></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>

3. 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></title>
</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>
</body>
</html>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 右键菜单 图片头像上传 文字标签 文字拖动 文字提示框 文件上传 彩色文字 拖动排序 提示框/弹出层 文本框 文字闪烁 layer 下拉框 打字机 弹出层拖动 lightbox 复选 文字列表 单选 Tooltip工具提示框 文字弹幕 登录框 浮动提示框 文字高亮 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 拖动拽动 360全景 html5文字动画 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 图片文字 文字导航菜单 切换按钮 form表单 文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到