html - 如何从文本框中提取用户输入并在另一个窗口中预览？

Question

我目前正在为一家公司做一些网页设计工作，我遇到了一个我无法解决的问题。

当客户从我的雇主网站购买东西时，他们有机会自定义出现在他们产品上的文本。有没有办法提取用户输入的文本并将其显示在另一个窗口中？

Answer 1

如此处所述，您可以打开一个新窗口并在那里写入您想要的任何内容：

var w = window.open('', '', 'width=400,height=400,resizeable,scrollbars');
w.document.write('Content goes here');
w.document.close(); // needed for chrome and safari

但要小心弹出窗口拦截器。我宁愿为此使用 DIV 或 IFRAME。

在您的项目中包含 jQuery 并定义

<div id="previewDiv"></div>

在您的标记中的某处，然后（假设您的文本字段有 id textField）调用

$('#preview').html($('#textField').val());

Answer 2

另一种方法是使用隐藏输入创建<form action="[preview_url]" target="_blank">隐藏。单击“预览”按钮时，将文本框的值复制到隐藏的输入值，然后提交隐藏的表单。

注意：这不会优雅地降级（没有 javascript），但我怀疑没有前端解决方案会。