Javascript 仅打印多个文本区域_Javascript_Html

Javascript 仅打印多个文本区域

javascript html

Javascript 仅打印多个文本区域,javascript,html,Javascript,Html,我正在构建一个页面，这样用户可以输入文本并打印出来。我要做的正是我想做的，除了在我的版本中会有多个文本区域有办法做到这一点吗？我有0%的JS知识，但我觉得必须有一种方法来循环（循环？）每个文本区域。另外，我想知道它是否会打印溢出文本我尝试将ID更改为类，然后更新为“getElementsbyClassName”，但这似乎破坏了一切也对其他解决方案开放 <html> <head> <title>Print TextArea</title&g

我正在构建一个页面，这样用户可以输入文本并打印出来。我要做的正是我想做的，除了在我的版本中会有多个文本区域

有办法做到这一点吗？我有0%的JS知识，但我觉得必须有一种方法来循环（循环？）每个文本区域。另外，我想知道它是否会打印溢出文本

我尝试将ID更改为类，然后更新为“getElementsbyClassName”，但这似乎破坏了一切

也对其他解决方案开放

<html>

<head>
    <title>Print TextArea</title>
    <script type="text/javascript">
        function printTextArea() {
            childWindow = window.open('', 'childWindow', 'location=yes, menubar=yes, toolbar=yes');
            childWindow.document.open();
            childWindow.document.write('<html><head></head><body>');
            childWindow.document.write(document.getElementById('targetTextArea').value.replace(/\n/gi, '<br>'));
            childWindow.document.write('</body></html>');
            childWindow.print();
            childWindow.document.close();
            childWindow.close();
        }

    </script>
</head>

<body>
    <textarea rows="20" cols="50" id="targetTextArea">
      TextArea value...
    </textarea>
    <input type="button" onclick="printTextArea()" value="Print Text" />
</body>

</html>


打印文本区
函数printTextArea（）{
打开（“”，'childWindow'，'location=yes，menubar=yes，toolbar=yes'）；
childWindow.document.open（）；
childWindow.document.write（“”）；
childWindow.document.write（document.getElementById（'targetTextArea'）.value.replace（/\n/gi，
）；
childWindow.document.write（“”）；
childWindow.print（）；
childWindow.document.close（）；
childWindow.close（）；
}
文本区域值。。。

我们必须打印所有的文本区域或某些特定的文本区域。

我已经修改了下面的代码；它现在做你想让它做的事。我所做的改变：

document.querySelectorAll（'textarea'）

现在选择页面上的所有

元素。（您的代码以前最多会选择一个。）您还可以为每个

指定一个

class=“printableTextarea”

属性（或您想调用该属性的任何内容），然后使用

document.querySelectorAll（'.printableTextarea'）

选择所有属性。WPU应该是更好的处理方法；如果您有一组要打印的文本区域，但是页面上的其他地方有一个独立的文本区域，用于其他用途，不应包含在打印输出中，该怎么办？假设独立的textarea没有

class=“printableTextarea”

属性，您将排除该textarea，这是您想要做的

我在您的代码中添加了第二个

，以便我们可以实际测试多文本区域逻辑是否工作

我正在使用

querySelectorAll（）

获取页面上的所有文本区域。有几种方法可以选择页面上的多个元素（

getElementsByClassName（）

就是如果您接受了我上面的建议，将要打印的文本区域指定为

printableTextarea

类，您会使用的方法）；这是其中之一，也是最简单的，满足您的需求

我删除了您的

id=“targetTextArea”

属性；这里不需要它，而且通常不希望多个元素具有相同的

id

属性


打印文本区
函数printTextArea（）{
打开（“”，'childWindow'，'location=yes，menubar=yes，toolbar=yes'）；
childWindow.document.open（）；
childWindow.document.write（“”）；
var allTextareaText=''；
var allTextareas=document.queryselectoral（'textarea'）；
对于（变量i=0，len=alltextarears.length；i）；
childWindow.document.write（“”）；
childWindow.print（）；
childWindow.document.close（）；
childWindow.close（）；
}
文本区域值。。。
文本区域值。。。

希望这有帮助

是的，谢谢。不过，它在Chrome或Safari中似乎不起作用@DD1229是的，奇数：在Chrome本地对我有效，但在你的AWS URL上无效。我猜是

childWindow.close（）

在有机会打印之前关闭弹出窗口-换句话说，

childWindow.print（）在Chrome和Safari上同步运行。只是猜测而已。但是删除childWindow.close（）
会让您了解这是否是问题所在。