Question

我正在使用jQuery Jeditable（令人惊奇的脚本btw）来创建就地编辑表单。所以，在表单的顶部，我加载脚本。然后，该表单由几个隐藏字段组成，这些字段预先填充了相关＆lt; p为H.标签

在这里你们的帮助下，这是一个如何填充字段的例子：

来自就地编辑页面的文字：

<p class="autogrow" style="width: 300px" id="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

开展业务的Javascript脚本：

<script type="text/javascript" charset="utf-8">
$(function() {
  $("#input_3_2").val($("#title").text());
});
</script>

我遇到的问题是，目前ID为“input_3_2”的字段会在页面加载时预先填充ID为“title”的段落中的文本。

每次更改段落时是否可以重新填充/重新填充字段？

Answer 1

您需要遍历每个文本字段的DOM及其相关的p标记。所以我说，遍历取决于你使用的HTML结构。在这里，我认为您可以将文本字段放在相关的p标记之前。您可以使用类似 -

的方式遍历DOM

   $("input:text").each(function(){
           $(this).val($(this).next('p').text());
   });

Answer 2

如果p具有属性contenteditable="true"，您可以订阅它的keyup事件。

例如，如果这是你的html

<p id="TargetP" contenteditable="true">
    Some text
</p>
<input type="hidden" id="TargetHidden"/>

<!-- This anchor is just for the purpose of the demonstration -->
<a href="javascript:;" id="ShowContent">Show hidden's value</a>

这个脚本将完成工作

$(function() {
    // declare the function that will take value from p 
    // and put it into the hidden
    function updateHidden() {
        $("#TargetHidden").val($("#TargetP").text());
    }

    // Call it for the first time to update the hidden
    updateHidden();

    // assign it each time the key is released when the p is being
    // edited
    $("#TargetP").keyup(updateHidden);

    // just a dummy action to show the content of the hidden at the
    // given time
    $("#ShowContent").click(function() {
        alert($("#TargetHidden").val());
    });
});

Here is the working demo

但是，如果onsubmit事件是同步的话，我宁愿选择form事件。

<!-- onsubmit="return false" is placed to prevent the form from being
     submitted remove it in production. -->
<form id="TargetForm" onsubmit="return false;">
    <p id="TargetP" contenteditable="true">
        Some text
    </p>
    <input type="hidden" id="TargetHidden"/>
    <input type="submit" value="Submit me" />

    <!-- Demo's helper link -->
    <a href="javascript:;" id="ShowContent">Show content</a>
</form>

脚本

// declare the function that will take value from p 
// and put it into the hidden
function updateHidden() {
    $("#TargetHidden").val($("#TargetP").text());
}

$(function() {
    // Call it for the first time to update the hidden
    updateHidden();

    // subscribe to the submit event of your form
    $("#TargetForm").submit(function() {
        updateHidden();
    });

    // dummy function for demo purposes
    $("#ShowContent").click(function() {
        alert($("#TargetHidden").val());
    });
});

And working demo

P.S。如果您有任何其他条件。注释掉，我会做出更新。

Answer 3

使用回调

$("#title").editable('http://www.example.com/save.php', { 
    type     : 'textarea',
    submit   : 'OK',
    callback : function(value, settings) {
        $("#input_3_2").val( value );     
    }
});

jQuery就地编辑 - 每次编辑内容时更新/预填充字段

3 个答案: