如何在textarea中放置隐藏的输入字段

时间:2017-03-01 23:17:50

标签: javascript html view popup textarea

我想制作一个弹出文本框,将弹出窗口中textarea的源代码显示为网页wile,同时显示textarea中的打印按钮代码,因为text仅作为弹出窗口的函数。正如您所看到的,我的textarea内容同时需要在textarea中隐藏javascript和html,但同时需要在文本区域内以便弹出窗口工作。

这意味着我不能将它们放在textarea之外,因为那个函数不会在弹出窗口中显示谁将显示web编辑器编辑器的textarea中的所有内容,除非弹出窗口指向一个包含一个div的div textarea而不是textarea直接。即使这样也会出现问题,因为textarea在获取弹出窗口时不会再转换为网页。

我正在使用这个textarea作为我的弹出窗口:

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

所以现在我想要的是打印按钮代码在textarea中不可见,但是当运行弹出按钮时它们作为打印按钮可见。这样打印按钮就会添加到网页设计师添加到框中的可见源代码中。

1 个答案:

答案 0 :(得分:-1)

<强>更新

当我发布此问题时,我发现在整个互联网上都没有回答。

在摆弄了很长时间之后,我在这里发布了这个问题。幸运的是,我在发布问题几分钟后找到了如何做到这一点的答案。我不会删除这个问题,因为我是互联网上第一个找到并回答这个问题的人。

<强>解决方案: 我解决了这个问题,只需将一个隐藏的textarea链接到输入弹出式javascript,它也链接到可见的textera。这样在弹出窗口中放置的内容将会出现在弹出窗口中,因此隐藏在隐藏文本区域中的功能也会在单击“预览”时出现在同一弹出窗口中。按钮。

您可以将任何HTML,CSS或JavaScript代码放在隐藏的textarea内部,并将隐藏在可见textarea中的所有输入代码隐藏起来,但是当弹出窗口打开时它会处于活动状态。

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

注意:

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

如果您不理解为什么需要它以及它是如何工作的,请自行测试。