[英]PHP/HTML: certain area selected with Ctrl+A
This is a bit hard to explain: I have a simple PHP file that outputs another PHP file with an include: 这有点难以解释:我有一个简单的PHP文件,该文件输出另一个包含include的PHP文件:
<?php include("file.php"); ?>
What I wanted to do is to have only part of it shown in the first page. 我想做的只是在第一页中显示一部分。 So I used overflow to create a window with scrollbars: 所以我用溢出来创建一个带有滚动条的窗口:
<div style="height: 130px; width: 800px; border: 1px solid #CCCCCC; overflow: auto;">
<?php include("file.php"); ?>
</div>
Everything works great. 一切正常。 But now I want to add another functionality: When you click inside this overflowed area and press Ctrl+A, only the part in the overflowed area should be selected (not the whole page). 但是现在我想添加另一个功能:当您在此溢出区域内单击并按Ctrl + A时,仅应选择溢出区域中的部分(而不是整个页面)。
I tried using HTML frames, which gave me the function I wanted but the overflowed PHP file doesn't get parsed. 我尝试使用HTML框架,这给了我我想要的功能,但是溢出的PHP文件没有得到解析。 Is there a way to accomplish this and still have the PHP file be parsed? 有没有一种方法可以做到这一点,并且仍然可以解析PHP文件?
You have several options 您有几种选择
I don't know how you did it, but frames have no influence over what is parsed by the server. 我不知道您是如何做到的,但是帧对服务器解析的内容没有影响。 IFrames, or frames, just make a regular GET request, the server then decides whether to parse or not the requested file. IFrame或框架只是发出常规GET请求,然后服务器决定是否解析请求的文件。
file1.php file1.php
<style>
.document {
height: 130px;
width: 800px;
border: 1px solid #CCCCCC;
}
</style>
<iframe src="file2.php" class="document" />
If you only want to include "text" (who knows, it could be...). 如果您只想包含“文本”(谁知道,可能是...)。 Consider putting your included file into a textarea
. 考虑将包含的文件放入textarea
。
file1.php file1.php
<style>
.document {
height: 130px;
width: 800px;
border: 1px solid #CCCCCC;
}
</style>
<textarea class="document"><?php include('file2.php'); ?></textarea>
ContentEditable fields limit their "select all". ContentEditable字段限制其“全选”。 See demo here 在此处查看演示
file1.php file1.php
<style>
.document {
height: 130px;
width: 800px;
border: 1px solid #CCCCCC;
}
</style>
<div class="document"><?php include('file2.php'); ?></div>
$(window).bind('keydown', function(e) {
if(event.ctrlKey && event.keyCode == 65) {
var self = $('.document').attr('contenteditable', '');
window.setTimeout(function() {
self.removeAttr('contenteditable');
}, 20);
}
});
Using contenteditable has 1 advantage over using textranges to select the contents: when clicking outside of your included document, all text on the page is selected (instead of "forcing" the "select only included file" feature). 相对于使用文本范围来选择内容,使用contenteditable具有1个优势:单击包含的文档之外时,页面上的所有文本都被选中(而不是``强制''``仅选择包含的文件''功能)。
It may be possible to intercept the key combination with javascript. 可能可以使用javascript截取按键组合。 If you manage to intercept it, then possibly you can highlight the part you require. 如果您设法拦截它,则可以突出显示所需的零件。 See here for a more detailed analysis of what can and can't be done. 请参阅此处 ,详细了解可以做什么和不能做什么。
EDIT: 编辑:
I've checked this in Firefox 13 and it seems to intercept the key combination Ctrl+A 我已经在Firefox 13中进行了检查,似乎拦截了Ctrl + A组合键
$(window).keydown(function(event) {
if(event.ctrlKey && event.keyCode == 65) {
console.log("Ctrl+A event captured!");
event.preventDefault();
}
});
Probably you can insert code in there to select the portion of text you wish to select. 可能您可以在其中插入代码以选择要选择的文本部分。
EDIT 2: How to select the text: 编辑2:如何选择文字:
I found this post which explains how to select text (highlight with mouse). 我发现这篇文章解释了如何选择文本(用鼠标突出显示)。 I put it all together to get this: 我把它们放在一起得到了:
$(window).keydown(function(event) {
if(event.ctrlKey && event.keyCode == 65) {
console.log("Ctrl+A event captured!");
selectText('test');
event.preventDefault();
}
});
function selectText(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) { //ms
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { //all others
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
Again, in Firefox 13, this seems to work. 同样,在Firefox 13中,这似乎可行。 Put the ID of the div you need to select as a parameter to the selectText() call. 将您需要选择的div的ID用作selectText()调用的参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.