LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

jQuery操作编辑页面,span与input标签之间的随时转换

liguoquan
2024年10月22日 17:36 本文热度 371
:jQuery操作编辑页面,span与input标签之间的随时转换


jQuery操作编辑页面,span与input标签之间的随时转换

当鼠标点击span时,span会根据需要变成input或select标签,光标移开时,又变回span标签来展示编辑后的内容。

HTML代码如下(span里的值是动态添加的,与此无关):

复制代码
 1           <li>
 2               <label for="companyType">企业性质</label>
 3                 <span class="companyType spanToSelect" id="companyType"></span>
 4           </li>
 5           <li>
 6               <label for="companySize">企业规模</label>
 7               <span class="companySize spanToSelect" id="companySize"></span>
 8           </li>
 9           <li>
10               <label for="companyMsg" class="companyMsgLabel">企业简介</label>
11                 <span class="companyMsg spanToTextarea" id="companyMsg"></span>
12           </li>
13           <br>
14           <br>
15           <li>
16               联系方式
17               <hr>
18           </li>
19           <li>
20               <label for="companyAddress">企业地址</label>
21               <input type="text" name="addressSelect" id="citySelect" class="city_input" value="湖北省-武汉市-洪山区" readonly="readonly">
22           </li>
23           <li>
24                  <span id="companyAddress" class="companyAddress spanToInput"></span>
25           </li>
26           <li>
27               <label for="companyTel">企业电话</label>
28               <input type="tel" id="tel1" class="tel1" placeholder="">
29               <select name="tel2" id="tel2" class="smallBtn2">
30                   <option value="021">021</option>
31               </select>
32               <span class="companyTel spanToInput" id="companyTel"></span>
33           </li>
34           <li>
35               <label >企业邮箱</label>
36               <span class="companyMail spanToInput" id="companyMail"></span>
37           </li>
38           <li>
39               <label for="companyIp">企业网址</label>
40               <span class="companyIp spanToInput" id="companyIp"></span>
41           </li>
复制代码

js代码如下:

1、input select textarea转span
复制代码
 1 var switchToSpan=function () {
 2             // console.log($(this).attr("id"));
 3             var cId=$(this).attr("id");//获取当前点击input的id
 4            //console.log($("#"+cId).prop('nodeName').toLowerCase());
 5             var thisTag=$("#"+cId).prop('nodeName').toLowerCase();
 6         var a,b=null;
 7         if(thisTag=="input"){
 8             a=$(this).val();
 9              b=switchToInput;
10         }
11         else if(thisTag=="select"){
12              a=$(this).find("option:selected").text();//获取selected的option文本值
13              b=switchToSelect;
14         }
15         else if(thisTag=="textarea"){
16             a=$(this).val();
17             b=switchToTextarea;
18         }
19         var $span=$("<span>",{
20                     text: a
21                 });
22             $span.addClass(cId);
23             $span.attr("id",cId);
24             $(this).replaceWith($span);
25             $span.on("click",b);
26 };
复制代码
2、span转input
复制代码
 1 var switchToInput=function () {
 2             //console.log($(this).attr("id"));
 3             var cId=$(this).attr("id");//获取当前点击span的id
 4             var $input=$("<input>",{
 5                 val:$(this).text(),    
 6                 type:"text"
 7             });
 8             $input.addClass(cId);
 9             $input.attr("id",cId);
10             $(this).replaceWith($input);
11             $input.on("blur",switchToSpan);//失去焦点时,执行switchToSpan函数
12             $input.select();
13         };
复制代码

  3、span转select

复制代码
 1  var switchToSelect=function () {
 2 
 3             var cId = $(this).attr("id");//获取当前点击input的id
 4             var $select = $("<select></select>");
 5             var arr=[["国有企业","集体企业","私营企业","三资企业"],["人数<20","20≤人数<300","300≤人数<1000","1000≤人数<5000","人数≥5000"]];
 6             var j=null;
 7             if(cId=="companyType"){
 8                 //var arr1=new Array("国有企业","集体企业","私营企业","三资企业");
 9                 //console.log(arr1);
10                 $select.addClass("midBtn1");
11                 j=0;
12             }
13             else if(cId=="companySize"){
14                 j=1;
15                 $select.addClass("midBtn1");
16             }
17             for(var i=0;i<arr[j].length;i++){
18                 $select.append("<option value='"+arr[j][i]+"'>" +arr[j][i]+"</option>");
19             }
20             $select.addClass(cId);
21             $select.attr("id", cId);
22             $(this).replaceWith($select);
23             $select.on("blur",switchToSpan);
24 }
复制代码

4、span转textarea

复制代码
 1  var switchToTextarea=function () {
 2             var cId = $(this).attr("id");
 3             var $textarea=$("<textarea cols='50' rows='6'></textarea>");
 4             $textarea.val($(this).text());
 5             $textarea.addClass(cId);
 6             $textarea.attr("id",cId);
 7             $(this).replaceWith($textarea);
 8             $textarea.on("blur",switchToSpan);
 9             $textarea.select();
10 
11         }
复制代码

5、给span添加点击事件

1     $(".spanToInput").on("click",switchToInput);
2     $(".spanToSelect").on("click",switchToSelect);
3     $(".spanToTextarea").on("click",switchToTextarea);

 jQuery操作编辑页面,span与input标签之间的随时转换 - mmmzf - 博客园


该文章在 2024/10/22 17:36:31 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved