如何在文本区域内放置一个隐藏的输入字段

Question

我想制作一个弹出文本框，将弹出窗口中文本区域的源代码显示为网页，同时它不会显示打印按钮代码在文本区域中，因为该文本仅用作弹出窗口的功能。如您所见，我的 textarea 内容同时包含 javascript 和 html，他们需要从 textarea 中隐藏，但同时需要在文本区域内才能使弹出窗口正常工作。

这意味着我不能将它们放在文本区域之外，因为那样的话该功能将不会显示在弹出窗口中 window 除非弹出窗口是目标 div 包含文本区域而不是直接包含文本区域。即便如此也会出现问题，因为在弹出窗口时文本区域将不再转换为网页。

我正在为我的弹出窗口使用这个文本区域：

    <textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="The is Source Codes here"><script language="Javascript">
    function printit(){
    if (NS) {
        window.print() ;
    } else {
        var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
    document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
        WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box    WebBrowser1.outerHTML = "";
    }
    }
    </script>
    <script language="Javascript">
    var NS = (navigator.appName == "Netscape");
    var VERSION = parseInt(navigator.appVersion);
    if (VERSION > 3) {
        document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
    }
    </script></textarea>
<br>
    <!-- Run Textarea field in popup BEGIN -->
    <script type="text/javascript">
    var win = null;
    function NewWindow(mypage,myname,w,h,scroll) {
    LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
    TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
    settings =
    'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
    win = window.open(mypage,myname,settings);
    if (window.focus) {win.focus()}
    var t = document.form1.textfield.value; 
    win.document.write(t);
    }
    </script>
    <input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
    <!-- Run Textarea field in popup END -->

所以现在我想要的是打印按钮代码在文本区域中不可见，但是当弹出按钮为运行时它们作为打印按钮可见。以便打印按钮添加到网页设计师添加到框中的可见源代码。

Answer 1

更新

当我发布这个问题时，我发现整个互联网上都没有答案。

折腾了半天把问题贴在这里。幸运的是，我在发布问题几分钟后找到了如何做的答案。我不会删除这个问题，因为我是互联网上第一个找到并回答这个问题的人。

解法： 我通过简单地制作一个链接到输入弹出窗口 javascript 的隐藏文本区域解决了这个问题，输入弹出窗口也链接到可见的 textera。这样，可见文本区域内的任何内容都会出现在弹出窗口中，因此当单击 "Preview" 按钮时，隐藏在隐藏文本区域内的功能也会出现在同一弹出窗口中。

您可以将任何 HTML、CSS 或 JavaScript 代码放入可见文本区域和隐藏文本区域中，所有输入代码都从可见文本区域中隐藏，但在以下情况下处于活动状态弹出窗口已打开。

<form name = "form1">

<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="Put your Source Codes here">
</textarea>

<textarea hidden="on" name="textfield2" cols="1" rows="1" id="CodeExample2">
<script language="Javascript">
function printit(){
if (NS) {
    window.print() ;
} else {
    var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
    WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box    WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
    document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script>
</textarea>

<br>

<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t1 = document.form1.textfield.value;
var t2 = document.form1.textfield2.value;       
win.document.write(t1);
win.document.write(t2);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->

</form>

注意：

如果你像我一样在网上制作一个带有预览功能的网络编辑器，那么它突然变得有意义了。因为您会想要预览您在文本框内输入的代码，并且在预览时您还希望文本框显示一些额外的按钮，例如打印您所做的预览。非常适合测试设计或页面等，然后通过单击文本框生成的弹出窗口上的一个按钮将其打印出来。看看我找到的解决方案并自己测试一下，看看我的意思和原因。它适用于任何 HTML、CSS 和 JS 源代码。

如果您不明白为什么需要它以及它是如何工作的，请自行测试。

如何在文本区域内放置一个隐藏的输入字段

How do I place a hidden input field inside a textarea

html

javascript

textarea

view

popup