Wednesday, June 11, 2008

want Range texts gadget over frame #001

I want a gadget that's range text, especially "over frame".
Of couse It's cross browser I want.

1. select object
At first, I looked for how to select text it don't think frame.
Then it include 'input' and 'textarea' tag.

IE is easy. it can use 'document.selection' object.
document.selection.createRange() method can select body, input and texterea.

e.g.
<script type="text/javascript"><!--
getRangeTextTest = function(){
var range_obj = window.document.selection.createRange();
if (range_obj) range_str = range_obj.text;
// display
if (range_str) alert('Range "' + range_str + '"');
}
// --></script>
<button onclick="getRangeTextTest()">Selection Check</button>
<textarea>Test script
"まぐろ" is Tuna in English.
"Tuma" is wife in English</textarea>
<input type="text" value="text input test">
<input type="password" value="great passwd">


This e.g can exec to push "Selection Check".
Then if you select some text, alert dialog show with you're selected text.

The problem is other browser.
other browser almost can't use 'document.selection', but 'window.getSelection()' have.
However 'window.getSelection()' is only html string range, not include neither input and textarea.
But we can use ranges start offset and end offset, it gets range area to use these method.

e.g.


<script type="text/javascript"><!--
////////////////////////////////////////////////////////////
// get select range by tags(e.g. input, extarea)
////////////////////////////////////////////////////////////
rangeSelectionTags: function(tag){
// tags search to get Element
var elms = window.document.getElementsByTagName(tag);
var res;
// Searching for target element
for (var i = 0, e_start = 0, e_end = 0; elms[i] && !res;
i++) {
e_start = elms[i].selectionStart;
e_end = elms[i].selectionEnd;
// get range text (Start Pos - End Pos)
if (e_start != e_end) res =
elms[i].value.slice(e_start, e_end);
}
return res;
}
////////////////////////////////////////////////////////////
// get range text main
////////////////////////////////////////////////////////////
getRangeTextTest = function(){
var range_obj = window.document.selection.createRange();
var range_str;
// range text include 'html'
if (range_obj) {
range_str = range_obj.toString();
//
tange text include other place(textarea, input)
} else {
range_str = rangeSelectionTags('textarea');
if (!range_str) range_str =
rangeSelectionTags('input');
}
// display
if (range_str) alert('Range "' + range_str + '"');
}
// --></script>
<button onclick="getRangeTextTest()">Selection
Check</button>
<textarea>Test script
"まぐろ" is Tuna in English.
"Tuma" is wife in English</textarea>
<input type="text" value="text input test">
<input type="password" value="great passwd">


to use selectionStart and selectionEnd it can select in textarea and input.
tested browsers are FireFox, Safari, Opera.
* Opera can use document.selection. however input tag can't only select.
next time:
over frame range text used this tech.

No comments: