Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS 

Selection //JavaScript Class




Retrieves and sets the cursor position, as well the selected text of inputs and textareas. After searching, I saw it's the only code which retrieves right information in textareas under Internet Explorer without damaging the "Ctrl+Z"

[UPDATED CODE AND HELP CAN BE FOUND HERE]



//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/selection [v1.0]

Selection = function(input){
	this.isTA = (this.input = input).nodeName.toLowerCase() == "textarea";
};
with({o: Selection.prototype}){
	o.setCaret = function(start, end){
		var o = this.input;
		if(Selection.isStandard)
			o.setSelectionRange(start, end);
		else if(Selection.isSupported){
			var t = this.input.createTextRange();
			end -= start + o.value.slice(start + 1, end).split("\n").length - 1;
			start -= o.value.slice(0, start).split("\n").length - 1;
			t.move("character", start), t.moveEnd("character", end), t.select();
		}
	};
	o.getCaret = function(){
		var o = this.input, d = document;
		if(Selection.isStandard)
			return {start: o.selectionStart, end: o.selectionEnd};
		else if(Selection.isSupported){
			var s = (this.input.focus(), d.selection.createRange()), r, start, end, value;
			if(s.parentElement() != o)
				return {start: 0, end: 0};
			if(this.isTA ? (r = s.duplicate()).moveToElementText(o) : r = o.createTextRange(), !this.isTA)
				return r.setEndPoint("EndToStart", s), {start: r.text.length, end: r.text.length + s.text.length};
			for(var $ = "[###]"; (value = o.value).indexOf($) + 1; $ += $);
			r.setEndPoint("StartToEnd", s), r.text = $ + r.text, end = o.value.indexOf($);
			s.text = $, start = o.value.indexOf($);
			if(d.execCommand && d.queryCommandSupported("Undo"))
				for(r = 3; --r; d.execCommand("Undo"));
			return o.value = value, this.setCaret(start, end), {start: start, end: end};
		}
		return {start: 0, end: 0};
	};
	o.getText = function(){
		var o = this.getCaret();
		return this.input.value.slice(o.start, o.end);
	};
	o.setText = function(text){
		var o = this.getCaret(), i = this.input, s = i.value;
		i.value = s.slice(0, o.start) + text + s.slice(o.end);
		this.setCaret(o.start += text.length, o.start);
	};
	new function(){
		var d = document, o = d.createElement("input"), s = Selection;
		s.isStandard = "selectionStart" in o;
		s.isSupported = s.isStandard || (o = d.selection) && !!o.createRange();
	};
}


Example

<form id="form">
	<fieldset>
		<legend>Selection Test</legend>
		<textarea name="text" rows="10" cols="30">
www.jsfromhell.com
Jonas Carlos Lalala
Bin Laden x Bush
		</textarea><br />
		<input name="getText" type="button" value="[Get selected text]" />
		<input name="getSel" type="button" value="[Get cursor]" />
		<br /><input name="setText" type="button" value="[Set selected text]" />
		<input name="setSel" type="button" value="[Set cursor]" />
	</fieldset>
</form>

<script type="text/javascript">
var f = document.forms.form;
var selection = new Selection(f.text);

f.getText.onclick = function(){
	alert(selection.getText());
	f.text.focus();
};
f.setText.onclick = function(){
	var s = prompt("New text:", selection.getText());
	s !== null && selection.setText(s);
	f.text.focus();
};
f.getSel.onclick = function(){
	var s = selection.getCaret();
	alert("Start: " + s.start + "\nEnd: " + s.end);
	f.text.focus();
};
f.setSel.onclick = function(){
	var s = selection.getCaret();
	selection.setCaret(+prompt("Start:", s.start) || 0, +prompt("End:", s.end) || 0);
	f.text.focus();
};
</script>

cross-browser way to get selection.

function getSel(){
var w=window,d=document,gS='getSelection';
return (''+(w[gS]?w[gS]():d[gS]?d[gS]():d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,'');
}

Open Text Links // Bookmarklet

Open Text Links : this bookmarklet collects strings of the form http://... or https://... in the user-selected text and then open them all in new windows. tested with Firefox 1.5 and IE 6.

The code
javascript:(function(){var w=window,d=document,rg=/\bhtt(p|ps)\:\/\/\S+\b/ig,gS='getSelection';var links=(''+(w[gS]? w[gS]():(d[gS]?d[gS]():d.selection.createRange().text))).match(rg);if(confirm(links.join('\n')))for(var i=0,len=links.length;i<len;i++) w.open(links[i]);alert('done');})()


Code with comments
javascript:(function(){
  var w=window,d=document,rg=/\bhtt(p|ps)\:\/\/\S+\b/ig,gS='getSelection';

  // set links = the list of strings of the form http:/... or https:/... in the selected area
  var links=(''+(w[gS]? w[gS]():(d[gS]?d[gS]():d.selection.createRange().text))).match(rg);

  // if user confirms the list then open them all in new windows and then alert 'done'.
  if(confirm(links.join('\n')))
     for(var i=0,len=links.length;i<len;i++)
        w.open(links[i]);alert('done');
})()
« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS