span标签中有一个input标签，用jquery获取span中的html内容，却获取不到在input中输入的值

Posted 2023-05-10

html代码是：<span id="Label1"><input id="Text1" name="Text1" type="text" /></span>

jquery:
$(document).ready(function ()
$("#ImageButton1").click(function ()
alert($("#Label1").html());
);
);
然后在input中输入123，点击ImageButton1后在弹出的对话框中只显示<input id="Text1" name="Text1" type="text" />，没有input的value值，按理来说应该是<input id="Text1" name="Text1" type="text" value="123"/>,很奇怪，请高手指点这是怎么回事呢
我知道的，用val()可以获得在input中输入的值，但是我想用html()获取span标签中的html内容，不仅仅只是input的value值，请大家指点指点

将这个js(jquery-getHtml-value.js)文件引入到你的页面中，将$("#ImageButton1").html()替换成$("#ImageButton1").formhtml ()，具体代码：如下
(function($)
var oldHTML = $.fn.html;
$.fn.formhtml =function()
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function()
this.setAttribute('value',this.value);
);
$(":radio,:checkbox", this).each(function()
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
);
$("option", this).each(function()
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
);
return oldHTML.apply(this);
;
)(jQuery); 参考技术A 输入的那就是value值，用val()方法就行追问

用val()可以获得在input中输入的值，但是我想用html()获取span标签中的html内容，不仅仅是input的value值，请指点，谢谢

参考技术B 是用这个的 $(selector).val()_返回Value属性，不是用heml()的

出自顺网络：
jQuery获得和设置_内容、属性、表单字段的值的方
一文

更多：(www).A2345.(net)

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);