PHP/HTML: certain area selected with Ctrl+A

Question

This is a bit hard to explain: I have a simple PHP file that outputs another PHP file with an include:

<?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).

I tried using HTML frames, which gave me the function I wanted but the overflowed PHP file doesn't get parsed. Is there a way to accomplish this and still have the PHP file be parsed?

Answer 1

You have several options

Don't include, link through iframe

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.

file1.php

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

---

Include into an element that limits the "select all"

If you only want to include "text" (who knows, it could be...). Consider putting your included file into a textarea.

file1.php

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

---

Quirky way: catch "ctrl+a" and apply contenteditable for a moment

ContentEditable fields limit their "select all". See demo here

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).

Answer 2

It may be possible to intercept the key combination with 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

$(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:

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. Put the ID of the div you need to select as a parameter to the selectText() call.