gpt4 book ai didi

javascript - 仅打印多个文本区域

转载 作者:行者123 更新时间:2023-12-02 21:43:30 25 4
gpt4 key购买 nike

我正在构建一个页面,以便用户可以输入文本并意图打印。我要离开this post这正是我想要做的,除了在我的版本中会有多个文本区域。

有办法做到这一点吗?我的 JS 知识为 0%,但我觉得必须有一种方法可以循环(循环?)每个文本区域。另外,我想知道它是否会打印溢出文本。

我尝试将 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>

最佳答案

我修改了下面的代码;它现在会做你想要它做的事情。我所做的更改:

  1. document.querySelectorAll('textarea')现在选择全部 <textarea>页面上的元素。 (您的代码以前最多选择一个。)您还可以给每个 <textarea>一个class="printableTextarea"属性(或任何您想要调用该属性的名称),然后使用 document.querySelectorAll('.printableTextarea') 选择所有这些属性反而。这可能是处理这个问题的更好方法;如果您想要打印一组文本区域,但在页面的其他位置有一个独立的文本区域用于其他目的且不应包含在打印输出中,该怎么办?假设独立文本区域没有 class="printableTextarea"属性,您将排除该文本区域,这正是您想要做的。
  2. 我添加了第二个 <textarea>添加到您的代码中,以便我们可以实际测试多文本区域逻辑是否有效。
  3. 我正在使用querySelectorAll()获取页面上的所有文本区域。有几种方法可以选择页面上的多个元素(例如,如果您采纳我上面的建议,为要打印的文本区域提供 getElementsByClassName() 类,那么您将使用 printableTextarea );这是其中之一,也是最简单的,可以满足您的需求。
  4. 我删除了您的id="targetTextArea"属性;这里不需要它,而且,您通常不希望多个元素具有相同的 id属性。
<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>');

var allTextareaText = '';

var allTextareas = document.querySelectorAll('textarea');
for (var i = 0, len = allTextareas.length; i < len; i++) {
allTextareaText += allTextareas[i].value + '\n\n';
}
childWindow.document.write(allTextareaText.replace(/\n/gi, '<br>'));
childWindow.document.write('</body></html>');
childWindow.print();
childWindow.document.close();
childWindow.close();
}

</script>
</head>

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

希望这有帮助!

关于javascript - 仅打印多个文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60323583/

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