用于编辑输入字段的弹出窗口

Pop-up for Editing Input Field

本文关键字：窗口 字段 编辑 输入 用于      更新时间：2023-09-26

我正在创建一个HTML表单。在它里面，有一个输入框，我想为它创建一个提供文本区域的弹出窗口。这将给用户更多的空间来输入更大的文本块。我当前的代码使子窗口（弹出窗口）能够将输入的文本发送回父窗口。但是，我还需要让父窗口将当前文本发送到子窗口中的文本区域。我很感激你的帮助。

为了这个讨论的目的，我创建了一个简化的版本，只有一个输入框。

这是来自父级的代码：

<HTML><HEAD></HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function openChild(file,window) {
    childWindow=open(file,window,'resizable=no,width=200,height=400');
    if (childWindow.opener == null) childWindow.opener = self;
    }
//--></SCRIPT>
<BODY>
<FORM NAME="parentForm">
<INPUT TYPE="button" VALUE="Open child" onClick="openChild('examplejs2.html','win2')">
<BR><INPUT NAME="pf1" TYPE="TEXT" VALUE="">
</FORM></BODY></HTML>

以下是来自子窗口（弹出窗口）的代码：

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function updateParent() {
    opener.document.parentForm.pf1.value = document.childForm.cf1.value;
    opener.document.parentForm.pf2.value = document.childForm.cf2.value;
    if (document.childForm.cf3[0].checked)
       opener.document.parentForm.pf3[0].checked = true;
    if (document.childForm.cf3[1].checked)
       opener.document.parentForm.pf3[1].checked = true;       
    self.close();
    return false;
}
//--></SCRIPT>
</HEAD><BODY>
<FORM NAME="childForm" onSubmit="return updateParent();">
<BR><INPUT NAME="cf1" TYPE="TEXT" VALUE="">
</FORM></BODY></HTML>

我最终放弃了问题中的大部分工作，并且没有使用不同的窗口（但仍然使用弹出窗口）。这是HTML:

<input type="text" id="text-source" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
<button id="edit">Edit</button>
<div id="edit-popup" style="display: none">
     <textarea id="text-edit"/>
</div>

以下是我确定的javascript：

$("#edit").click(function() {
        $("#text-edit").val($("#text-source").val());
    $("#edit-popup").dialog({
        height: 400,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
        $("#text-source").val($("#text-edit").val());
                $(this).dialog("close");
        }
        }
    });
});

在行动中看到它：https://jsfiddle.net/sazzy/5m621rLa/

我在您的子窗体中没有看到文本区域，但假设您的子窗口具有：

<textarea name="cf1"></textarea>

打开子窗口后，您可能需要等待它准备好/加载，然后执行以下操作：

var myVal = document.getElementsByName("pf1")[0].value;
childWindow.document.getElementsByName("cf1")[0].value = myVal;
相关文章：