您将失去焦点,因为浏览器将启动本机打印API,该API通常还包括打开打印对话框或打印预览。当与该对话框进行交互时,单击文本将失去焦点。(在Chrome中,其他浏览器未测试)
随着使用
monitorEvents
我可以告诉你“发生了什么”
monitorEvents(window);
window.getSelection().selectAllChildren(document.getElementsByClassName('post-text')[0]);
window.print();
pointerover PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, â¦}
VM324:1 mouseover MouseEvent {isTrusted: true, screenX: -1644, screenY: 153, clientX: 276, clientY: 60, â¦}
VM324:1 pointermove PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, â¦}
VM324:1 mousemove MouseEvent {isTrusted: true, screenX: -1644, screenY: 153, clientX: 276, clientY: 60, â¦}
VM324:1 pointerdown PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5, â¦}
VM324:1 mousedown MouseEvent {isTrusted: true, screenX: -1644, screenY: 153, clientX: 276, clientY: 60, â¦}
VM324:1 pointermove PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5, â¦}
VM324:1 mousemove MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, â¦}
VM324:1 pointerup PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, â¦}
VM324:1 mouseup MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, â¦}
VM324:1 click MouseEvent {isTrusted: true, screenX: -1634, screenY: 205, clientX: 286, clientY: 112, â¦}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
在本例中使用chrome,我单击了打印对话框UI中的一个按钮。这个mouseup事件导致焦点消失,显然选择最终被取消。Chrome可能会将打印对话框作为影子DOM对象插入,使其上的交互具有文档事件。
我发现,如果使用escape键退出对话框,则此事件不会传输到全局事件侦听器,从而导致它没有任何效果,并使选择保持不变。
因此,如果要打印该选项,可以使用下面的代码:
+function() {
var iframe = document.createElement('iframe');
iframe.width = document.width;
iframe.height = document.height;
document.body.append(iframe);
var origNode = document.querySelectorAll('.post-text .default.prettyprint.prettyprinted')[0];
var node = origNode.cloneNode(true);
var copyComputedStyle = function(from,to){
var computed_style_object = false;
computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);
if(!computed_style_object) return null;
var stylePropertyValid = function(name,value){
return typeof value !== 'undefined' &&
typeof value !== 'object' &&
typeof value !== 'function' &&
value.length > 0 &&
value != parseInt(value)
};
for(property in computed_style_object)
{
if(stylePropertyValid(property,computed_style_object[property]))
{
to.style[property] = computed_style_object[property];
}
}
};
copyComputedStyle(origNode, node);
var buildChild = function(masterList, childList) {
for(c=0; c<masterList.length; c++) {
var master = masterList[c];
var child = childList[c];
copyComputedStyle(master, child);
if(master.children && master.children.length > 0) {
buildChild(master.children, child.children);
}
}
}
if(origNode.children && origNode.children.length > 0) {
buildChild(origNode.children, node.children);
}
iframe.contentWindow.document.body.append(node);
iframe.contentWindow.print();
window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
}();