gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 16:07:45 24 4
gpt4 key购买 nike

我正在创建一个 HTML 表单。在其中,有一个输入框,我想为其创建一个提供文本区域的弹出窗口。这将为用户提供更多空间来输入更大的文本 block 。我当前的代码使子窗口(弹出窗口)能够将输入的文本发送回父窗口。但是,我还需要让父窗口将当前文本发送到子窗口中的文本区域。我会很感激一些帮助。

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

这是来自父级的代码:

<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/

关于javascript - 用于编辑输入字段的弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36728108/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com