有没有办法强制引导模式只选择模态中的文本？
当按 CTRL+A 时，它会选择页面上的所有文本，在模态之外 我可以添加一个文本区域，但它不会那么好，我将不得不与它抗争以适应模态
。
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal({show: true});
});
});/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 250px;
overflow-y: auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<p>SOME TEXT IN THE BACKGROUND, THIS TEXT WILL ALSO BE SELECTED</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>
### CLICK HERE, then HIT CTRL A to select all the story below:####
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus metus, condimentum at tortor vitae, pellentesque convallis urna. Maecenas tristique in nulla a vulputate. Nullam orci arcu, maximus et nisi quis, maximus elementum eros. Vivamus pulvinar finibus sapien at porttitor. Mauris eu elit sodales, vulputate leo dapibus, dapibus nisl. Proin tincidunt, tortor vitae varius pharetra, est elit commodo velit, eu fermentum sem lorem sit amet nunc. Fusce malesuada a mi sit amet eleifend. Suspendisse mauris nulla, laoreet et euismod non, posuere non ante.
Integer eleifend massa velit, non auctor magna finibus vel. Fusce in diam eget ligula sagittis eleifend. Duis tincidunt porta ex, sed egestas sapien tincidunt non. Cras scelerisque gravida semper. Aenean tristique augue quis mi sagittis rhoncus. Donec et mi orci. Integer dignissim quam a varius pulvinar. Morbi porttitor turpis neque, ac egestas erat accumsan ac. Etiam mollis sit amet felis euismod convallis.
Nam at lorem varius lacus semper consectetur non a purus. Integer imperdiet eget enim pharetra suscipit. Pellentesque vel dolor vestibulum, tincidunt erat at, dictum purus. Donec faucibus nibh quis nisi faucibus, eget dignissim nisi porta. Aenean id risus condimentum, rutrum purus a, convallis enim. Pellentesque pellentesque augue et venenatis gravida. Suspendisse eu consectetur diam. Cras pretium felis non ligula varius hendrerit. Aenean volutpat mollis ante, sit amet pharetra neque pretium eget. Vivamus est nisl, hendrerit sit amet fermentum vel, lobortis a nisl.
Donec euismod augue non quam volutpat venenatis. Phasellus ultricies porttitor tortor, placerat rutrum eros semper quis. Ut ut velit at sapien feugiat tincidunt a volutpat metus. Morbi lorem tortor, lacinia in gravida eu, ornare ac libero. Maecenas quis purus non eros euismod viverra. Nullam vitae ornare sem. Sed porttitor quam id iaculis suscipit. Nulla sodales sem sed nisl cursus gravida. Nunc id mauris orci. Morbi blandit elit quis sem cursus iaculis. Fusce finibus, nibh id ullamcorper dictum, orci tortor tincidunt orci, in pretium quam lacus ut turpis. Quisque in euismod lacus, et laoreet nisi.
Proin feugiat urna malesuada, eleifend purus congue, vehicula lorem. Aliquam venenatis augue hendrerit, tristique turpis vel, finibus mi. In eleifend est ac pretium fringilla. Sed ultrices sit amet sem in sollicitudin. Aenean eu odio non lorem suscipit imperdiet ac a quam. Sed id libero nec velit viverra facilisis. Cras venenatis pretium tellus, id fermentum elit sagittis nec. Duis non diam ac enim lobortis tempor sit amet gravida tellus. Quisque sagittis scelerisque fermentum. Morbi suscipit sed ipsum a vehicula. Nullam at euismod est, vel sollicitudin diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec felis nibh, porttitor sed felis ut, interdum gravida nunc. Suspendisse tristique nulla tellus, id auctor massa suscipit vitae. In volutpat enim sit amet libero mattis aliquam. Etiam tempus laoreet massa, eu feugiat enim ultrices sit amet. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>有可能...
在 html 中
<div>
<p>Content not to be copied</p>
<!-- Tab index is very important. It allows the content to be focusable -->
<div id="copy-target" tabindex="0">
<p>Content to be copied</p>
<p>Another content to be copied</p>
</div>
</div>
在 js 中
const copyTarget = document.getElementById("copy-target");
copyTarget.addEventListener("keydown", e => {
const isControlPressed = e.getModifierState("Control");
const isAPressed = e.keyCode === 65; // Key code for 'A'
if (isControlPressed && isAPressed) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
const sel = window.getSelection(); // Get the selection from the window
range = document.createRange(); // Create a range object
range.selectNodeContents(copyTarget); // Set the range to the contents of the copyTarget
sel.removeAllRanges(); // Remove all ranges from selection (if any)
sel.addRange(range); // Add range to the selection.
// document.execCommand("copy") // Copy the selected range
}
})
但是，要使其正常工作，您需要专注于copyTarget元素(在这种情况下，您的模态(
这是我的笔的链接，演示了这一点......https://codepen.io/kwameopareasiedu/pen/GRgNMbP
如果您只想让人们选择所有内容以便他们可以复制文本，解决方法可能是使用剪贴板.js之类的东西。