PHP / HTML：使用Ctrl + A選擇的某些區域

Question

這有點難以解釋：我有一個簡單的PHP文件，該文件輸出另一個包含include的PHP文件：

<?php include("file.php"); ?>

我想做的只是在第一頁中顯示一部分。 所以我用溢出來創建一個帶有滾動條的窗口：

<div style="height: 130px; width: 800px; border: 1px solid #CCCCCC; overflow: auto;">
 <?php include("file.php"); ?>
</div>

一切正常。 但是現在我想添加另一個功能：當您在此溢出區域內單擊並按Ctrl + A時，僅應選擇溢出區域中的部分（而不是整個頁面）。

我嘗試使用HTML框架，這給了我我想要的功能，但是溢出的PHP文件沒有得到解析。 有沒有一種方法可以做到這一點，並且仍然可以解析PHP文件？

Answer 1

您有幾種選擇

不包含，通過iframe鏈接

我不知道您是如何做到的，但是幀對服務器解析的內容沒有影響。 IFrame或框架只是發出常規GET請求，然后服務器決定是否解析請求的文件。

file1.php

<style>
    .document {
        height: 130px; 
        width: 800px;
        border: 1px solid #CCCCCC;
    }
</style>
<iframe src="file2.php" class="document" />

---

包含在限制“全選”的元素中

如果您只想包含“文本”（誰知道，可能是...）。 考慮將包含的文件放入textarea 。

file1.php

<style>
    .document {
        height: 130px; 
        width: 800px;
        border: 1px solid #CCCCCC;
    }
</style>
<textarea class="document"><?php include('file2.php'); ?></textarea>

---

古怪的方式：捕獲“ ctrl + a”並應用內容可編輯片刻

ContentEditable字段限制其“全選”。 在此處查看演示

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);
    }
});

相對於使用文本范圍來選擇內容，使用contenteditable具有1個優勢：單擊包含的文檔之外時，頁面上的所有文本都被選中（而不是``強制''``僅選擇包含的文件''功能）。

Answer 2

可能可以使用javascript截取按鍵組合。 如果您設法攔截它，則可以突出顯示所需的零件。 請參閱此處 ，詳細了解可以做什么和不能做什么。

編輯：

我已經在Firefox 13中進行了檢查，似乎攔截了C​​trl + A組合鍵

$(window).keydown(function(event) {
  if(event.ctrlKey && event.keyCode == 65) { 
    console.log("Ctrl+A event captured!");
    event.preventDefault(); 
  }
});

可能您可以在其中插入代碼以選擇要選擇的文本部分。

編輯2：如何選擇文字：

我發現這篇文章解釋了如何選擇文本（用鼠標突出顯示）。 我把它們放在一起得到了：

$(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);
  }

同樣，在Firefox 13中，這似乎可行。 將您需要選擇的div的ID用作selectText（）調用的參數。