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

Posted 2020-11-21 mmmzf

当鼠标点击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);