从文本框中提取文本并将其放入javascript中的span中_Javascript_Jquery

从文本框中提取文本并将其放入javascript中的span中

javascript jquery

从文本框中提取文本并将其放入javascript中的span中,javascript,jquery,Javascript,Jquery,我正在做一个自我打印功能，收集用户屏幕上的所有HTML，并将其放入一个变量中，然后显示一个弹出屏幕，以便用户可以打印该信息 var disp_setting = "toolbar=no,location=no,directories=no,menubar=no,"; disp_setting += "scrollbars=yes, height=500, left=100, top=25"; var content_vlue = document.

我正在做一个自我打印功能，收集用户屏幕上的所有HTML，并将其放入一个变量中，然后显示一个弹出屏幕，以便用户可以打印该信息

        var disp_setting = "toolbar=no,location=no,directories=no,menubar=no,";
        disp_setting += "scrollbars=yes, height=500, left=100, top=25";
        var content_vlue = document.getElementById("print_content").innerHTML;
        var docprint = window.open("", "", disp_setting);
        docprint.document.open();
        docprint.document.write('<html><head>');
        docprint.document.write('</head><body text="#000000" onLoad="self.print()">');
        docprint.document.write('<table>');
        docprint.document.write(content_vlue);
        docprint.document.write('</table>');
        docprint.document.write('</body></html>');
        docprint.document.close();

更新：好的，感谢到目前为止的许多建议，我开始取得一些进展

我想做的不是操纵打印内容，而是将打印内容放入一个变量，即content，然后操纵content

var content_vlue = document.getElementById("print_content").innerHTML;
$("content_vlue").find("INPUT[type='text']").each(function(i){
var input = $(this);
input.replaceWith("<span class='textinput'>" + input.val() + "</span>";
});

有办法做到这一点吗？

您可以使用jQuery这样的库吗？创建页面后，用span标记替换输入将非常简单：

function cleaninputs(){
  $("body").find("input").each(function(i) {
    var input = $(this);
    input.replaceWith("<span class='textInput'>" + input.val() + "</span>");
  });
}

与：

你应该准备好了。为了更好地衡量，我制作了一个jsfiddle:

仅使用CSS，您可以简单地隐藏文本框的边框，使其看起来像普通文本：

docprint.document.write('<style type="text/css"> input { border: 0; }</style>');

是的，我可以这样做，这样会去掉边框，但假设文本框只显示我想显示的25个字符中的13个，而其他12个字符目前正在隐藏。@Jeff，输入{border:0；width:300px；}应该可以做到这一点。。将300px替换为容器的宽度（如果它是固定的），也可以使用JS代码在运行时设置宽度：在您的更新中，.print\u内容选择器是一个打字错误吗？如果不是，它应该是与getElementById等效的打印内容。@Rfvgyhn-谢谢。。。那是我的错别字。。。我现在可以访问该分区的.html。。。虽然.RFvgyhn是正确的，但我仍然在替换文本框时遇到问题。使用标记选择器$div获取所有实例，或使用$print_content按ID仅选择一个实例。@RSG-函数i中的i是什么？i是索引，请参阅以获取完整解释。在这种情况下不需要，您可以安全地删除它。请参阅我的更新问题。你的建议使我走上了正确的道路。。。只是想知道我是否可以从另一个变量中操作html文本。这就是解决方案！多谢！

var content_vlue = document.getElementById("print_content").innerHTML;

var content_vlue = replaceInputs("print_content");

docprint.document.write('<style type="text/css"> input { border: 0; }</style>');