当鼠标点击 span 时, span 会根据需要变成 input 或 select 标签, 光标移开时, 又变回 span 标签来展示编辑后的内容.
html 代码如下 (span 里的值是动态添加的, 与此无关):
- <li>
- <label for="companyType"> 企业性质 </label>
- <span class="companyType spanToSelect" id="companyType"></span>
- </li>
- <li>
- <label for="companySize"> 企业规模 </label>
- <span class="companySize spanToSelect" id="companySize"></span>
- </li>
- <li>
- <label for="companyMsg" class="companyMsgLabel"> 企业简介 </label>
- <span class="companyMsg spanToTextarea" id="companyMsg"></span>
- </li>
- <br>
- <br>
- <li>
联系方式
- <hr>
- </li>
- <li>
- <label for="companyAddress"> 企业地址 </label>
- <input type="text" name="addressSelect" id="citySelect" class="city_input" value="湖北省 - 武汉市 - 洪山区" readonly="readonly">
- </li>
- <li>
- <span id="companyAddress" class="companyAddress spanToInput"></span>
- </li>
- <li>
- <label for="companyTel"> 企业电话 </label>
- <input type="tel" id="tel1" class="tel1" placeholder="">
- <select name="tel2" id="tel2" class="smallBtn2">
- <option value="021">021</option>
- </select>
- <span class="companyTel spanToInput" id="companyTel"></span>
- </li>
- <li>
- <label > 企业邮箱 </label>
- <span class="companyMail spanToInput" id="companyMail"></span>
- </li>
- <li>
- <label for="companyIp"> 企业网址 </label>
- <span class="companyIp spanToInput" id="companyIp"></span>
- </li>
js 代码如下:
1,input select textarea 转 span
- var switchToSpan=function () {
- // console.log($(this).attr("id"));
- var cId=$(this).attr("id");// 获取当前点击 input 的 id
- //console.log($("#"+cId).prop('nodeName').toLowerCase());
- var thisTag=$("#"+cId).prop('nodeName').toLowerCase();
- var a,b=null;
- if(thisTag=="input"){
- a=$(this).val();
- b=switchToInput;
- }
- else if(thisTag=="select"){
- a=$(this).find("option:selected").text();// 获取 selected 的 option 文本值
- b=switchToSelect;
- }
- else if(thisTag=="textarea"){
- a=$(this).val();
- b=switchToTextarea;
- }
- var $span=$("<span>",{
- text: a
- });
- $span.addClass(cId);
- $span.attr("id",cId);
- $(this).replaceWith($span);
- $span.on("click",b);
- };
2,span 转 input
- var switchToInput=function () {
- //console.log($(this).attr("id"));
- var cId=$(this).attr("id");// 获取当前点击 span 的 id
- var $input=$("<input>",{
- val:$(this).text(),
- type:"text"
- });
- $input.addClass(cId);
- $input.attr("id",cId);
- $(this).replaceWith($input);
- $input.on("blur",switchToSpan);// 失去焦点时, 执行 switchToSpan 函数
- $input.select();
- };
3,span 转 select
- var switchToSelect=function () {
- var cId = $(this).attr("id");// 获取当前点击 input 的 id
- var $select = $("<select></select>");
- var arr=[["国有企业","集体企业","私营企业","三资企业"],["人数 < 20","20人数 < 300","300人数 < 1000","1000人数 < 5000","人数5000"]];
- var j=null;
- if(cId=="companyType"){
- //var arr1=new Array("国有企业","集体企业","私营企业","三资企业");
- //console.log(arr1);
- $select.addClass("midBtn1");
- j=0;
- }
- else if(cId=="companySize"){
- j=1;
- $select.addClass("midBtn1");
- }
- for(var i=0;i<arr[j].length;i++){
- $select.append("<option value='"+arr[j][i]+"'>" +arr[j][i]+"</option>");
- }
- $select.addClass(cId);
- $select.attr("id", cId);
- $(this).replaceWith($select);
- $select.on("blur",switchToSpan);
- }
4,span 转 textarea
- var switchToTextarea=function () {
- var cId = $(this).attr("id");
- var $textarea=$("<textarea cols='50'rows='6'></textarea>");
- $textarea.val($(this).text());
- $textarea.addClass(cId);
- $textarea.attr("id",cId);
- $(this).replaceWith($textarea);
- $textarea.on("blur",switchToSpan);
- $textarea.select();
- }
5, 给 span 添加点击事件
- $(".spanToInput").on("click",switchToInput);
- $(".spanToSelect").on("click",switchToSelect);
- $(".spanToTextarea").on("click",switchToTextarea);
来源: http://www.bubuko.com/infodetail-2671158.html