从文本框中获取文本并将其放入javascript中
问题描述:
我正在执行自我打印功能,方法是收集用户屏幕中的所有HTML并将其放入一个变量,然后显示一个弹出屏幕,以便用户可以打印该信息。从文本框中获取文本并将其放入javascript中
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();
UPDATE: OK感谢很多的建议,到目前为止,我已经开始取得一些进展...
我想什么做的是不是操纵print_content,我会喜欢将print_content放入一个变量(即content_vlue),然后操作content_vlue。
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>");
});
}
编辑:
这里有一个稍微重构版本,它应该做你想要什么:
function replaceInputs(_which){
var cleanHTML = $("#"+_which).clone();
cleanHTML.find("input").each(function() {
var input = $(this);
input.replaceWith("<span class='textInput'>"+ " " + input.val() + "</span>");
});
return cleanHTML.html();
}
然后替换此行:
var content_vlue = document.getElementById("print_content").innerHTML;
用:
var content_vlue = replaceInputs("print_content");
而且你应该全部设置。好措施我做了一个的jsfiddle:http://jsfiddle.net/pcsF3/1/
+0
@RSG - 请参阅我更新的问题。 – webdad3 2011-01-06 23:24:45
答
只使用CSS,你可以简单地隐藏的文本框边框使它看起来像普通的文本:
docprint.document.write('<style type="text/css"> input { border: 0; }</style>');
在您的更新,是'.print_content`选择一个错字?如果不是,它应该是`#print_content`等同于`getElementById`。 – Chris 2011-01-06 23:27:01
@Rfvgyhn - 谢谢...这是我的错字...我现在可以访问该div的.html ...我仍然有问题,取代了文本框。 – webdad3 2011-01-07 17:01:31