将输入字段设置为标签元素的当前值答案

【问题标题】：Set input fields to the current value of label elements将输入字段设置为标签元素的当前值
【发布时间】：2010-08-11 20:27:26
【问题描述】：

如何获取函数showEditionBlock() 中标签元素的当前值并将它们设置为相应的输入字段？该函数将显示“编辑”div，但输入未获取标签的原始值。

<html>
<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

</head>
<script>
$(document).ready(
    function()
        {

           $("#companyNameText").keyup(
           function()
           {
               $("#companyNameLabel").html(this.value);
           });

           $("#companyCountryText").keyup(
           function()
           {
               $("#companyCountryLabel").html(this.value);
           });
    });
function showEditionBlock(){
    //$("div#edit").css('display','block').fadeIn("slow");  
    $("div#edit").fadeIn('slow', function(){ 
            $(this).css('display', 'inline'); 
        }); 
    }

function hideEditionBlock(){
    //$("div#edit").css('display','block').fadeIn("slow");  
    $("div#edit").fadeOut('slow', function(){ 
            $(this).css('display', 'none'); 
        }); 
    }



</script>
        <body>
                <div id="preview">
            <fieldset>
                        <label id="companyNameLabel" class="workExperience">
                                This is my company
                        </label>
                        <label id="companyCountryLabel" class="workExperience">
                                This is my company Country
                        </label>
                        <input type="button" value="edit" onclick="showEditionBlock();"/>
            </fieldset>
                </div>
                <div id="edit" style="display:none;">
            <fieldset>
                        <label>Company Name: </label>
                        <input type="text" id="companyNameText" />
                        <label>Company Country: </label>
                        <input type="text" id="companyCountryText" />
                        <input type="button" value="Ok" onclick="hideEditionBlock();"/>
            </fieldset>
                </div>
        </body>
</html>

【问题讨论】：

标签： javascript jquery input label

【解决方案1】：

您应该将标签的innerHTML 分配给输入的values。在普通的 Javascript 中，您可以执行以下操作：

document.getElementById("companyNameText").value =
    document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
    document.getElementById("companyCountryLabel").innerHTML;

使用jQuery，也是这样：

$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());

【讨论】：